Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Prend une couleur et fait tourner sa teinte selon une règle d’harmonie, en gardant la luminosité et le chroma OKLCH, pour qu’une triade ne revienne pas avec un membre visiblement plus sombre que les autres. La même règle est dessinée en HSL en dessous, ce qui est la façon la plus rapide de voir pourquoi cela compte. Avant l’export, il vérifie si deux échantillons se confondent sous une déficience de la vision des couleurs et si chacun peut porter du texte.
Couleur de base
N’importe quelle notation CSS. L’harmonie garde la luminosité et le chroma OKLCH de cette couleur et fait tourner la teinte.
Harmonie
Des voisines, à 30° de chaque côté. Cela se lit comme une seule famille de couleurs ; il faut une différence de contraste pour porter la hiérarchie, car les teintes ne le feront pas.
OKLCH
#0094c3L 62,3 C 0,188 H 230
#3b82f6L 62,3 C 0,188 H 260
#886ceeL 62,3 C 0,188 H 290
La même règle en HSL, pour comparer
#3be0f6L 83,3 C 0,132 H 209
#3b82f6L 62,3 C 0,188 H 260
#523bf6L 51,4 C 0,260 H 278
Les deux bandes font tourner la teinte des mêmes angles. La ligne OKLCH garde la luminosité perçue constante : son écartement vaut 0,0000, alors que celui de la ligne HSL vaut 0,3191, parce que la « luminosité » de HSL n’est pas perceptuelle. Le jaune pur et le bleu pur revendiquent tous deux 50 % et diffèrent de plus de 65 points de L*. Cette différence n’est pas un artefact de rendu ; c’est une rampe de luminosité que personne n’a demandée, gravée dans chaque harmonie HSL.
Écart de luminosité
0,0000
Hors de sRGB
1 sur 3
1 échantillon n’a pas pu garder le chroma de base dans sRGB et en a abandonné 0,064. Les valeurs hexadécimales sont les versions ramenées dans le gamut ; les valeurs oklch() de l’export sont ce qu’un écran à large gamut affichera réellement.
Est-ce que ça tient ?
Le couple le plus proche sous chaque type de vision simulée, en ΔE OKLab
- Protanopie0,026— ces deux-là se confondent
- Deutéranopie0,021— ces deux-là se confondent
- Tritanopie0,012— ces deux-là se confondent
- Achromatopsie0,013— ces deux-là se confondent
Contraste WCAG sur blanc et sur noir
- sur blanc 3,49·sur noir 6,02utilisable en texte sur l’un des deux
- sur blanc 3,68·sur noir 5,71utilisable en texte sur l’un des deux
- sur blanc 3,87·sur noir 5,43utilisable en texte sur l’un des deux
Un couple qui se confond sous une simulation est un couple qui ne doit pas être la seule différence entre deux choses : ajoutez une forme, une étiquette ou un palier de luminosité. Le vérificateur de contraste donne le verdict APCA complet pour un couple précis.
Export
Les formes CSS et Tailwind émettent oklch() avec l’hexadécimal en commentaire : jeter la précision au moment de l’export annulerait la raison même de calculer en OKLCH, et un navigateur à qui l’on donne oklch() affiche la couleur à large gamut là où il le peut.
Vous voulez, au lieu d’un jeu de teintes, une gamme complète de 50 à 950 à partir de l’une d’elles ? L’échelle de teintes et de nuances en construit une, calée sur une courbe de luminosité mesurée.
Comment s’en servir
Entrez la couleur que vous avez déjà
En général la couleur de marque, dans n’importe quelle notation CSS. Tout le reste dérive de sa teinte, de sa luminosité et de son chroma : c’est donc la seule décision qui façonne l’ensemble.
Choisissez la règle, puis ajustez son écartement
La complémentaire est une teinte opposée ; l’analogue prend les voisines ; la triade en place trois à 120° ; la complémentaire divisée adoucit un couple complémentaire. Le curseur d’écartement met ces décalages à l’échelle — 1 est l’espacement du manuel, et en dessous l’ensemble se lit comme une seule famille. Le monochrome et les nuances demandent plutôt un nombre de pas, parce qu’ils font varier la luminosité et non la teinte.
Comparez les deux bandes
L’écart de luminosité sous la rangée OKLCH est proche de zéro par construction. La rangée HSL tourne des mêmes angles et son écart ne l’est pas, parce que la luminosité HSL n’est pas perceptuelle : le jaune pur et le bleu pur revendiquent tous deux 50 %. Si les deux bandes vous paraissent identiques pour cette couleur de base précise, c’est qu’elles le sont, et l’une comme l’autre convient.
Lisez le panneau « est-ce que ça tient » avant d’exporter
Il rapporte le couple le plus proche sous chaque type de vision simulé, en ΔE OKLab, et le contraste WCAG de chaque échantillon contre le blanc et le noir. Un couple marqué comme se confondant ne doit pas être la seule chose qui distingue deux états : ajoutez une forme, une étiquette, ou un pas de luminosité.
Exportez avec le préfixe qu’emploie votre code
Variables CSS, bloc `@theme` Tailwind, SCSS, jetons JSON ou planche d’échantillons SVG. Les formes CSS émettent `oklch()` avec l’hexadécimal à côté en commentaire.
Questions fréquentes
L’hexadécimal et l’oklch() de l’export sont des couleurs différentes. Lequel est le bon ?
Les deux, pour des écrans différents. Quand garder le chroma de base ferait sortir un échantillon du sRGB, l’hexadécimal est la version ramenée dans le gamut — du chroma abandonné pour tenir — et la valeur `oklch()` est la couleur réellement calculée, celle qu’un écran à gamut large montrera. Le panneau dit combien de chroma chaque échantillon écrêté a perdu.
Une règle d’harmonie garantit-elle que la palette sera belle ?
Non. Ce sont des angles sur une roue de teintes, et la géométrie n’est pas le goût. Ce qu’une règle vous donne, c’est un ensemble de départ défendable avec une raison derrière chaque teinte, ce qui vaut mieux que trois couleurs choisies une à une. Le jugement sur les proportions — laquelle occupe la grande surface et laquelle est l’accent à 5 % — n’est pas ici du tout.
Puis-je coller une palette que j’ai déjà et la vérifier ?
Pas ici : cette page part d’une seule couleur et dérive le reste. Pour un couple précis, le vérificateur de contraste prend les deux couleurs et donne le verdict complet. Pour une échelle à partir d’un de ces échantillons, l’outil de teintes et nuances la construit.
Qu’est-ce qui compte comme « ces deux-là se confondent » ?
Un ΔE OKLab en dessous de 0,06 après simulation, c’est-à-dire à peu près le point où deux aplats cessent d’être séparables d’un coup d’œil. La simulation elle-même est l’approche matricielle de type Brettel : un modèle des déficiences courantes, pas une mesure sur une personne en particulier, et elle ne dit rien des types plus rares ni d’une perte de vision acquise.
À alimenter depuis
Extraire la palette d’une image
Palette Extractor
Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.
Simulateur de daltonisme
Colour Blindness Simulator
Réaffiche une image telle que la verraient une protanopie, une deutéranopie, une tritanopie ou une vision en niveaux de gris.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Générateur de dégradé CSS
CSS Gradient Builder
Compose des dégradés linéaires, radiaux et coniques avec des arrêts déplaçables et rend le CSS, en sRGB ou en OKLCH.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Extracteur de jetons CSS
CSS Token Extractor
Extrait couleurs, espacements, rayons et polices d’une feuille de style et propose un jeu de propriétés personnalisées.
Extraire la palette d’une image
Palette Extractor
Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.