Conversion des couleurs

Conversions – Détails – Harmonies – Images – Prévisualisation – Simulation du daltonisme – CSS – Aide

Conversions

Vous voyez ici votre couleur convertie en 15 formats de couleurs différents comme RVB, CMJN, HSV, HSL, CIELab, Android, Decimal et YUV.

🤖 Convertissez plusieurs couleurs à la fois ou 📢 obtenez des conversions et des harmonies via l’API REST.

📕 HOWCOLORS.WORK

Un guide de notation des couleurs CSS.

ou achetez-le sur Leanpub !

Détails

La couleur Hex B76E79 est une couleur foncée, et la version websafe est hex 996666, et le nom de la couleur est rose gold. Un complément de cette couleur serait 6EB7AC, et la version en niveaux de gris est 858585.
Une version 20% plus claire de la couleur originale est F1A3AD, et 803D49 est la couleur 20% plus foncée. Si vous saturez la couleur de 10%, vous obtenez B75C69, et si vous désaturez de 10%, c’est B78089.

Distribution

.

Luminosité & Gradients de saturation

Ces gradients montrent comment la couleur Hex B76E79 change en modifiant la luminosité de 10 pour cent. La première figure montre un changement de +10% pour chaque couleur et la deuxième figure -10%.

Similaire aux gradients de luminosité mais les gradients de saturation suivants montrent un changement de la couleur Hex B76E79 en changeant la saturation de 10% à la place.

Harmonies

.

Exemples CSS

Texte

La propriété CSS permettant de changer la couleur du texte en Hex B76E79 est appelée « color ». La propriété color peut être définie sur les classes, les ids ou directement sur l’élément HTML.

Cet exemple montre à quoi ressemble un texte de la couleur #B76E79.

.text, #text, p{color:#B76E79}
📋 Copy Code

Si vous voulez ajouter une ombre de texte dans cette couleur, utilisez la propriété text-shadow, vous pouvez générer une ombre de texte directement avec notre 🔧 générateur d’ombres de texte CSS.

Vous voyez ici à quoi ressemble un texte noir avec une ombre de couleur #B76E79 de 4 pixels.

.shadow{ text-shadow: 4px 4px 2px #B76E79 } 
📋 Copy Code

Border

La propriété CSS permettant de modifier la bordure d’un élément en Hex B76E79 est appelée « border ». La propriété border peut être définie sur les classes, les ids ou directement sur l’élément HTML.

Cet exemple montre la couleur comme border, elle peut être appliquée via la propriété CSS « border » ou « border-color ».

.border, #border, table{ border:4px solid #B76E79 }
📋 Copy Code

Si seule la couleur de la bordure doit être modifiée, utilisez la propriété border-color.

.border{ border-color:#B76E79 }
📋 Copy Code

Si vous voulez ajouter une ombre de boîte dans cette couleur, utilisez :

Vous voyez ici à quoi ressemble une boîte avec une ombre de 4 pixels de couleur #B76E79.

.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #B76E79; -webkit-box-shadow:4px 4px 4px 4px #B76E79; box-shadow:4px 4px 4px 4px #B76E79 }
📋 Copy Code

Arrière-plan

La propriété CSS permettant de changer la couleur d’arrière-plan d’un élément en Hex B76E79 est appelée « background ». La propriété background peut être définie sur les classes, les ids ou directement sur l’élément HTML.

.background, #background, body{ background:#B76E79 }
📋 Copy Code

Si seule la couleur d’arrière-plan doit être modifiée peut être utilisée :

.background{ background-color:#B76E79 }
📋 Copy Code

Cet exemple montre la couleur comme arrière-plan, elle est appliquée via la propriété CSS « background ».

Pour optimiser et compresser votre code CSS, vous pouvez utiliser notre compresseur et optimiseur CSS en ligne basé sur csstidy. Si vous souhaitez créer un dégradé linéaire ou radial comme arrière-plan ou bordure, consultez notre 🌈 CSS Gradient Generator.

📕 HOWCOLORS.WORK

Un guide de notation des couleurs en CSS.

ou achetez-le sur Leanpub !

Comment utiliser la conversion des couleurs

Conversion

Pour convertir, collez une chaîne dans l’un de ces formats de couleur, par exemple « B76E79 », dans le champ de saisie et cliquez sur convertir. Le résultat se trouvera dans la section Conversions, et les sections suivantes vous fourniront des détails supplémentaires sur la couleur.

Certains formats de couleur utilisent la même notation, et la conversion devinera la composition de la requête de recherche. À titre d’exemple, si vous essayez de convertir la chaîne « 351°, 40%, 72% », il pourrait s’agir d’une couleur HSV ou HSL, la conversion supposera HSL dans ce cas.

Comme cela pourrait conduire à des conversions erronées, vous pouvez définir quel format vous passez en enveloppant votre chaîne de couleur entre parenthèses avec le format devant. La chaîne de recherche « HSV(351°, 40%, 72%) » vous donnera la couleur HSV correcte car il n’est pas nécessaire de deviner le format. D’autres exemples seraient « CIELAB(54,66, 30,32, 6,37) », « CIELCH(55, 30,982, 11,862) », « YXY(22,5996, 0,3960, 0,3134) » et « CMYK(0,00, 0,40, 0,34, 0.28) ».

Détails

Dans la section des détails, vous obtenez d’abord un résumé de la couleur et, si disponible, une description comme « rouge foncé sourd ». Vous pouvez voir la répartition des couleurs dans différents formats. Par exemple, au format RVB, vous obtenez de connaître la quantité de rouge, de vert et de bleu dans votre couleur.

En dernier lieu, vous obtenez des gradients de luminosité et de saturation de votre couleur par paliers de 10 %. Donc, si vous avez besoin d’une version plus claire ou plus sombre, vous pouvez la choisir ici.

Harmonies

Les harmonies vous montrent essentiellement les couleurs qui vont bien avec la couleur que vous visualisez actuellement. Si vous aimez l’une des harmonies, vous pouvez directement créer un 🌈 dégradé CSS ou une 🔧 ombre de texte CSS à partir de celle-ci ou afficher l’harmonie comme un 🖌️ Color Bucket.

SVG Images

Cette courte section vous montre une sélection de fichiers SVG utilisant la couleur actuelle. Vous pouvez télécharger ces fichiers et les utiliser dans vos projets, par exemple, comme image d’arrière-plan.

Prévisions

Vous voulez voir comment votre couleur se présente sur un fond blanc ou noir ? Alors vous devriez consulter la section  » Aperçus  » de la page des couleurs.

Vous voyez également le contraste de votre couleur sur ces fonds et obtenez un lien vers le vérificateur de contraste des couleurs avec votre couleur présélectionnée.

Simulation de daltonisme

Lorsque vous sélectionnez une couleur pour votre projet, vous pourriez vouloir garder à l’esprit la façon dont cette couleur est perçue par toute personne ayant un déficit de vision des couleurs. C’est pourquoi j’ai ajouté cette section vous montrant des aperçus de votre couleur pour différentes déficiences de la vision des couleurs.

Exemples CSS

Si vous êtes nouveau dans le développement web, vous pourriez vouloir voir comment appliquer votre couleur comme couleur de premier plan, d’arrière-plan ou de bordure. La section « Exemples CSS » vous donne exactement cela, de l’aide pour utiliser la couleur actuelle en CSS.

Si vous visualisez une couleur dans un format non disponible en CSS, alors vous verrez la couleur convertie dans un format compatible.

Color Bucket

Vous avez décidé des couleurs pour votre prochain projet et vous voulez les télécharger comme une palette ou les partager avec des amis pour discuter de votre décision ? Alors vous devriez jeter un coup d’œil au seau à couleurs. Il vous permet de stocker jusqu’à 10 couleurs, crée automatiquement des palettes de couleurs pour chacune de ces couleurs en fonction de la luminosité, et vous donne une matrice WCAG.

Vous pouvez télécharger chacune des palettes de couleurs ou les couleurs sélectionnées sous forme de palette GIMP, Adobe® ASE ou Tailwind CSS. En outre, vous pouvez tout visualiser en tant que 🌈 dégradé CSS, 🔧 ombre de texte CSS ou 📷 image de palette de couleurs.

Pour ajouter une couleur à votre seau de couleurs, je mets un lien « ❤️ Ajouter cette couleur au seau » dans la section d’en-tête de chaque page de ce site Web.

Color Contrast Checker

Lorsque vous décidez des couleurs pour un projet, il est essentiel de garder le contraste des couleurs à l’esprit. Mon vérificateur de contraste des couleurs vous permet de vérifier les couleurs que vous avez sélectionnées conformément aux directives d’accessibilité aux contenus Web (WCAG) 2.0.

.