COULEUR, AVEC OBJET
D'une seule couleur de marque à des schémas de couleurs web pratiques. Choisissez des palettes correspondantes, des effets de page de prévisualisation et exportez vos variables de conception.
VOTRE PALETE
Les cartes de palettes de couleurs sont en préparation. Activer JavaScript pour commencer à utiliser.
Cliquez sur une valeur de couleur pour modifier son HEX avec précision, ou sur une grande montre pour la copier. La couleur de la marque reste fixe; d'autres montres peuvent être verrouillées.
Seules les 50 dernières étapes sont maintenues. Le rafraîchissement efface l'histoire.
11 étapes de légèreté pour l'état et la hiérarchie
VOIR LE CONTEXTE
Organiser des projets, connecter des équipes et transformer de grandes idées en prochaines étapes dans un espace de travail propre.
Des tâches quotidiennes aux nouvelles percées, partagez les progrès avec votre équipe et concentrez-vous sur ce qui compte vraiment.
Exemple de texte et de nombres sont pour prévisualiser les schémas de couleurs seulement. Les modes de commutation réarrangent les couleurs de fond, de surface et de texte; les couleurs fonctionnelles peuvent différer des cartes de couleur d'origine.
DESCRIPTION DES TOKENS
CONTRÔLE
Texte régulier ≥ 4.5:1, grand texte ≥ 3:1. Les limites de contrôle reposant sur la reconnaissance de la couleur exigent généralement ≥ 3:1; les lignes décoratives sont exemptées. Le rapport vérifie les paires de couleurs spécifiées; les pages complètes nécessitent toujours une vérification de la taille, de l'état et de l'arrière-plan de la police.
Cliquez sur les ratios dans la matrice pour comparer le premier plan et le second.
Les rapports de contraste entre les montres aident à évaluer les combinaisons de candidats; l'aptitude au texte corporel, aux contrôles de l'assurance-chômage ou aux graphiques dépend du cas d'utilisation spécifique.
PRÊT POUR VOTRE PROCHAINE ÉTAPE
Exportez des couleurs sémantiques, des palettes de couleurs d'accent et des échelles de couleurs primaires pour le mode thème actif.
Après avoir copié sur votre feuille de style, définissez les couleurs d'arrière-plan et de texte pour les composants réels, puis vérifiez les états de vol stationnaire, désactivés et focalisés.
Les schémas de couleurs ne sont pas téléchargés ou enregistrés par défaut. Utilisez des liens de palette ou des fichiers de téléchargement pour conserver vos résultats. Appuyez sur l'espace dans l'espace vide de l'atelier pour changer de jeu; verrouillez les cartes de couleur pour les retenir. Cette page contient des annonces sur le site.
Connectez cette étape à votre objectif
Après avoir utilisé cet outil, continuer avec les étapes pertinentes. Les notes de liste de contrôle sont vos propres notes, pas un test réussi ou une approbation d'entreprise.
Voir tous les objectifs d'affairesLes étapes de l'IA ont des limites d'utilisation partagées et une vérification humaine. Ils ne s'exécutent que lorsque vous soumettez, et ne reçoivent pas automatiquement les entrées ou les rapports des étapes précédentes.
ÉTAPE PROCHAINE
Utilisez les fonctionnalités d'image et de document sous leurs limites libres indiquées. Créez un compte d'entreprise pour le suivi du site Web, les demandes de renseignements commerciaux et les notifications d'équipe, ou discutez de votre workflow avec nous.
Les nouvelles entreprises reçoivent un essai Pro de 7 jours, sans carte requise. Les essais excluent la subvention de crédit mensuelle payée.
Vous avez déjà un compte ? Ouvrir votre espace de travail →Choisir une couleur de marque est facile, mais l'appliquer sur les pages Web nécessite plus de jugement. Les boutons doivent se démarquer, le texte du corps doit être clair, et les cartes ont besoin d'une hiérarchie visuelle; l'effet de la même couleur change lorsqu'il est placé sur des arrière-plans clairs ou sombres. Cet outil de palette de couleurs web apporte des couleurs primaires, des palettes correspondantes, des rampes continues, et des échantillons de page en direct dans un seul atelier, aidant les opérateurs de magasin, les gestionnaires de produits, les concepteurs et les développeurs à discuter ensemble des solutions viables.
Un beau jeu de swatches de couleur ne signifie pas que toutes les couleurs sont adaptées pour le texte du corps ou des boutons. Le Workbench construit des rôles pour le fond, la surface, le corps, le texte secondaire, le bouton primaire, l'accent et les bordures de couleurs primaires et secondaires, et sélectionne les couleurs de texte pour les boutons. Le mode lumière nécessite un contraste clair de texte, tandis que le mode sombre doit distinguer les arrière-plans des cartes; les deux ne peuvent être résolus par une inversion de couleur simple.
Si la couleur primaire est très légère, elle peut rester dans la palette de la marque tout en étant jumelée avec une couleur de texte plus appropriée pour les boutons. Les couleurs exactes sont mieux utilisées parcimonieusement; les grandes surfaces de fond nécessitent généralement une saturation plus faible. L'outil fournit un point de départ comparable, tandis que la mise en page finale, l'imagerie et la densité de contenu restent à votre portée.
L'échelle de couleur en 11 étapes est indiquée ici de 50, 100, 200 à 950, montrant des changements de légèreté de la lumière à l'obscurité. OKLCH sépare la légèreté du chroma et de la teinte, ce qui le rend idéal pour trouver des candidats pour des milieux clairs, des états sélectionnés, des états stationnaires et des textes sombres. Les candidats en dehors de la gamme sRGB auront leur chroma réduit avant de cartographier et de convertir en HEX.
Les chiffres de l'étape de l'ombre indiquent la position relative dans l'échelle d'ombre; ils n'impliquent pas que la couleur principale de votre marque doit résider à 500. Le jaune vif, le bleu profond et le rose clair ont des niveaux de légèreté d'entrée différents, mais la couleur primaire reste intacte dans le swatch primaire. Les couleurs fonctionnelles exportées et les étapes d'ombrage doivent être sélectionnées en fonction des composants réels et ajustées au sein de votre projet.
Les rapports de rapport de contraste calculent la luminance relative entre les couleurs opaques de premier plan et de fond de sRGB. Le texte régulier exige un rapport 4.5:1 pour la conformité aux AA; le texte volumineux (au moins 18pt en caractères ordinaires ou 14pt en caractères gras) exige 3:1. Les limites de contrôle et les graphiques significatifs utilisés pour l'identification nécessitent généralement 3:1, mais les diviseurs décoratifs varient. Passer une seule paire de couleurs ne signifie pas que toute la page Web répond à la conformité WCAG.
Les recouvrements transparents, les gradients et les images de produits modifieront l'arrière-plan réel; le survol, le focus, les alertes d'erreur et les états désactivés devront également être inspectés séparément. Le contenu ne peut pas compter uniquement sur la couleur – par exemple, les erreurs doivent également comporter un texte clair. Après avoir mis les palettes exportées dans les pages live, les opérations clavier, les tailles de police et les états doivent être évalués ensemble, et pas seulement ce rapport de palette.
L'équipe Ops peut sélectionner des candidats autour de la couleur primaire de la marque; l'équipe produit peut comparer les boutons et la hiérarchie d'information sur les maquettes Web; l'équipe design peut verrouiller les cartes préférées pour l'exploration; l'équipe de dev peut exporter des variables CSS et JSON. Partagez des liens rechargez les paramètres de couleur et d'interface utilisateur, minimisant les différences de couleur dans les captures d'écran.
Cet outil ne gère que les couleurs et les maquettes. Il ne fait aucun jugement automatisé sur le positionnement de la marque, les taux de conversion, ou la psychologie de l'industrie, et ne génère pas d'allégations non vérifiées sous le couvert de l'IA. Donner la même palette de couleurs des lignes directrices d'utilisation claires et des rapports de contraste vérifiables est le livrable actionnable que vous pouvez appliquer directement suivant.
Sélectionnez ou entrez une couleur de marque primaire, puis choisissez des schémas adjacents, complémentaires, complémentaires, triadiques ou monochromatiques. L'outil conserve votre couleur primaire d'entrée, génère les couleurs correspondantes restantes dans l'espace de couleur OKLCH, et fournit des prévisualisations web claires et sombres, des couleurs fonctionnelles et des contrôles de contraste. Les relations de couleur fournissent un point de départ de conception; les choix finaux devraient toujours tenir compte de la marque, de l'imagerie et des pages réelles.
La couleur primaire et l'éditeur précis de chaque swatch acceptent #RGB et #RRGGBB, comme #63F ou #635BFF, et les normalisent en HEX à six chiffres. Cliquez sur la valeur ci-dessous pour coller une couleur, la comparer avec l'original et l'appliquer. Transparence, noms de couleurs et autres espaces de couleurs d'entrée ne sont pas pris en charge. Vous pouvez toujours copier des montres comme HEX, RGB ou OKLCH; les exportations de CSS utilisent HEX.
Les boutons Undo et Redo au-dessus des swatches restaurent les couleurs, les serrures, l'harmonie, le style et les paramètres d'aperçu du site. En dehors des champs de texte, utilisez Ctrl / ш + Z pour annuler et Ctrl / ш + Shift + Z pour refaire; Windows prend également en charge Ctrl + Y. Les champs texte permettent de supprimer le texte natif du navigateur. Seules les 50 dernières étapes sont maintenues sur cette page, et rafraîchissantes les efface. Pour conserver une palette plus longtemps, copiez son lien de partage ou téléchargez un fichier.
OKLCH décrit la couleur en utilisant la légèreté, le chroma et la teinte, ce qui le rend généralement mieux adapté pour générer des échelles de couleur visuellement uniformes que le réglage direct de la légèreté HSL. Lors de la conversion en web-standard sRGB, certaines couleurs tombent en dehors de la gamme displayable ; l'outil réduit le chroma pour les mapper en sRGB. Les affichages peuvent encore varier selon les écrans, la lumière ambiante et les navigateurs.
Couleurs analogiques utilisent des teintes près de la couleur primaire, adapté pour les visuels cohésifs. Les couleurs complémentaires introduisent des teintes opposées pour mettre en évidence les points clés. Split-complémentaire semble adjacent à la teinte complémentaire pour maintenir la distinction. Les couleurs triadiques forment trois groupes de teintes distincts à travers la roue de couleur pour aider à différencier les modules. Le monochromatique ajuste la légèreté et le chroma autour de la couleur primaire de sorte que la hiérarchie se distingue plus que la teinte. Ce ne sont pas des règles déterministes pour l'industrie ou la psychologie de la marque.
Pas nécessairement. 50–950 sont des étiquettes d'ombre de conception représentant des changements progressifs de légèreté; 500 n'est pas une légèreté appropriée pour toutes les entrées. Votre couleur primaire d'entrée est entièrement conservée dans le swatch principal, tandis que les nuances sont utilisées pour trouver des candidats pour les arrière-plans, les bordures et les états stationnaires. Veuillez choisir en fonction de l'utilisation réelle et des exigences de contraste.
Cliquez sur le bouton de verrouillage d'une carte couleur pour la corriger. Lors du changement de combinaisons, de styles ou en cliquant sur "Shuffle", les autres cartes de couleur déverrouillées continueront de changer. Vous pouvez modifier une carte de couleur individuellement ou la définir comme la nouvelle couleur primaire. Cliquez sur "Déverrouiller tout" pour déverrouiller toutes les cartes de couleur, ou "Réinitialiser" pour restaurer les schémas de couleurs et les paramètres par défaut.
Non. Le rapport évalue uniquement le contraste relatif de luminance des couleurs de premier plan et de fond opaques énumérées. WCAG AA exige une 4.5:1 rapport pour le texte normal et 3:1 pour le texte en gros caractères; UI contrôle des limites et des graphiques nécessitant une identification de couleur 3:1. Le grand texte se réfère au moins à 18pt régulier ou 14pt texte gras. Transparence, dégradés, images de fond, hoverLes états/focus, la taille des polices et d'autres règles d'accessibilité doivent être vérifiés séparément sur les pages réelles; les diviseurs décoratifs n'exigent pas uniformément 3:1.
Les pages Web sombres nécessitent de réorganiser la hiérarchie des couleurs de fond, de surface, de corps et d'accent. L'outil génère des couleurs fonctionnelles basées sur le mode sélectionné et choisit les couleurs de texte appropriées pour les boutons primaires, tandis que les palettes de couleurs primaires conservent votre entrée. Différents modèles présentent le même ensemble de couleurs fonctionnelles pour une comparaison facile des effets réels en SaaS, vitrine de produits et pages B2B.
Les calculs de couleurs sont effectués localement dans votre navigateur sans soumettre de couleurs à ce site ou des schémas de sauvegarde au stockage local par défaut. Vous pouvez télécharger CSS ou JSON avant de fermer la page. Les liens de palette copiés incluent les couleurs et les paramètres d'interface utilisateur pour la réouverture ou le partage avec des collègues; veuillez ne pas inclure de renseignements personnels ou clients dans les liens. La page contient des annonces de site, qui utilisent leurs propres services de réseau.
L'exportation de CSS comprend des palettes de couleurs, une échelle de couleurs primaire en 11 étapes et des variables sémantiques pour les modes de lumière/dark actuels comme point de départ pour les styles web. JSON est idéal pour enregistrer des schémas de couleurs et des paramètres pour la revue de concepteur ou développeur. Les styles de copie ne garantissent pas automatiquement la conformité à l'accessibilité; veuillez vérifier par rapport au contenu réel et aux états des composants.
Calcul & Couleur Références :WCAG 2.2 Notes de contraste textuelles、Détails de contraste non textuelset CSS Couleur 4 OKLab / OKLCHC'est vrai. Cet outil permet de cartographier l'espace de couleur sRGB en réduisant le chroma et ne prétend pas reproduire tous les algorithmes de cartographie des couleurs du navigateur.
Une palette de sites Web étend une couleur primaire en arrière-plan, texte, accent et l'état des rôles pour créer la hiérarchie et les composants lisibles.
Les équipes de conception et de produits choisissent des couleurs pour une marque, un site Web ou une page d'atterrissage.
Entrez une couleur primaire, comparez les palettes et les prévisualisations d'interface, vérifiez le contraste texte, puis copiez les couleurs ou les variables de conception.
Inspectez les prévisualisations vraies lumière/obscurité, y compris les boutons, le texte du corps et les couleurs d'état. Préserver la couleur de la marque peut exiger des couleurs de texte et de bordure différentes sur différentes surfaces.
Les palettes, balances, contrastes et prévisualisations sont générés dans votre navigateur. Copier, exporter et partager un lien de palette sont des actions délibérées.
