Conversions – Détails – Harmonies – Images – Aperçu – Simulation du daltonisme – CSS – Aide
Conversions
Vous voyez ici votre couleur convertie en 15 formats de couleurs différents comme RVB, CMYK, HSV, HSL, CIELab, Android, Decimal et YUV.
🤖 Convertissez plusieurs couleurs à la fois ou 📢 obtenez des conversions et des harmonies via l’API REST.
| Format | Couleur |
|---|---|
| Hex | 496C3C 📋 |
| RGB | 73, 108, 60 📋 |
| RGB Pourcentage | 29%, 42%, 24% 📋 |
| CMY | 0.7137, 0.5765, 0.7647 📋 |
| CMYK | 0.32, 0.00, 0.44, 0.58 📋 |
| HSL | 104°, 29%, 33% 📋 |
| HSV | 104°, 44%, 42% 📋 |
| XYZ | 8.9258, 12.4678, 6.2111 📋 |
| Format | Color |
|---|---|
| RYB | 60, 108, 95 📋 |
| Decimal | 4811836 📋 |
| CIELab | 41.95, -22.52, 22.92 📋 |
| CIELCh | 42, 32.133, 134.485 📋 |
| Yxy | 12.4678, 0.3233, 0.4517 📋 |
| Android (android.graphics.Color) | 4283001916 (0xFF496C3C) 📋 |
| YUV | 92.0630, -15.8071, -16.7183 📋 |
- 📕 HOWCOLORS.WORK
- Distribution
- Luminosité & Gradients de saturation
- Analogues
- Triade
- Complémentaire
- Split Complementary
- Square
- Rectangle
- Sweetspot
- Fond blanc
- Vérification du contraste des couleurs
- Fond noir
- Vérification du contraste des couleurs
- RVB 73, 108, 60 Fond
- Dichromie
- Trichromie
- Monochromie
- Texte
- Border
- Background
- 📕 HOWCOLORS.WORK
- Conversion
- Détails
- Harmonies
- SVG Images
- Previews
- Simulation de daltonisme
- Exemples CSS
- Color Bucket
- Color Contrast Checker
📕 HOWCOLORS.WORK
Un guide de notation des couleurs CSS.
ou achetez-le sur Leanpub!
Détails
La couleur RVB 73, 108, 60 est une couleur foncée, et la version websafe est hex 336633. Un complément de cette couleur serait 95, 60, 108, et la version en niveaux de gris est 92, 92, 92.
Une version 20% plus claire de la couleur originale est 123, 160, 108, et 26, 60, 16 est la couleur 20% plus sombre. Si vous saturez la couleur de 10%, vous obtenez 65, 108, 49, et si vous désaturez de 10%, elle est de 81, 108, 71.
Distribution
- Rouge (29%)
- Vert (42%)
- Bleu (24%)
- Rouge (24%)
- Jaune (42%)
- Bleu (37%)
- Cyan (32%)
- Magenta (0%)
- Jaune (44%)
- Noir (58%)
- Cyan (71%)
- Magenta (58%)
- Jaune (76%)
Luminosité & Gradients de saturation
Ces gradients montrent comment la couleur RVB 73, 108, 60 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 RVB 73, 108, 60 en changeant la saturation de 10% à la place.
Harmonies
Analogues
L’harmonie de couleur analogue consiste en trois couleurs qui sont à côté les unes des autres sur la roue des couleurs.
- 103, 102, 46
- 73, 108, 60
- 33, 112, 84
Triade
L’harmonie triadique des couleurs regroupe trois couleurs régulièrement espacées les unes des autres et formant un triangle sur la roue des couleurs.
- 73, 108, 60
- 6, 106, 150
- 149, 77, 87
Complémentaire
L’harmonie de couleurs complémentaires est une paire de couleurs qui sont à l’opposé l’une de l’autre sur la roue des couleurs.
- 73, 108, 60
- 95, 60, 108
Split Complementary
Les couleurs split-complementary diffèrent du schéma de couleurs complémentaires. Le schéma se compose de trois couleurs, la couleur d’origine et deux voisines de la couleur complémentaire.
- 141, 79, 114
- 73, 108, 60
- 79, 97, 150
Square
Le schéma carré est comme le schéma de couleurs rectangle, mais les quatre couleurs sont espacées uniformément sur la roue des couleurs.
- 73, 108, 60
- 0, 111, 135
- 118, 87, 137
- 143, 83, 63
Rectangle
Le schéma de couleurs du rectangle se compose de quatre couleurs qui forment un rectangle sur la roue des couleurs.
- 73, 108, 60
- 0, 113, 102
- 118, 87, 137
- 148, 77, 96
Sweetspot
Le sweet spot regroupe la couleur d’origine et cinq couleurs complémentaires.
- 73, 108, 60
- 127, 140, 122
- 108, 94, 60
- 63, 71, 60
- 199, 199, 199
- 71, 71, 71
SVG Images
Une sélection d’images SVG utilisant la version hexagonale #496C3C de la couleur actuelle.
Aperçu
Fond blanc
Cet aperçu montre comment la couleur RVB 73, 108, 60 se présente sur un fond blanc.
Vérification du contraste des couleurs
Si vous voulez vérifier avec d’autres combinaisons de couleurs, essayez le vérificateur de contraste de couleurs.
Fond noir
Cet aperçu montre comment la couleur RVB 73, 108, 60 se présente sur un fond noir.
Vérification du contraste des couleurs
Si vous voulez vérifier avec d’autres combinaisons de couleurs, essayez le vérificateur de contraste de couleurs.
RVB 73, 108, 60 Fond
Cet aperçu montre l’aspect du texte noir sur un fond avec la couleur RVB 73, 108, 60.
Cet aperçu montre l’aspect d’un texte blanc sur un fond de couleur RVB 73, 108, 60.
Simulation du daltonisme
La déficience de la vision des couleurs est un sujet très complexe, et je ne pourrais pas décrire les différentes causes mieux que ne le fait Wikipedia, donc si vous voulez en savoir plus, vous devriez consulter leur article sur le daltonisme.
Dichromie
73, 108, 60
108, 99, 57
119, 94, 63
81, 102, 110
Trichromie
73, 108, 60
95, 102, 58
102, 99, 62
78, 104, 92
Monochromie
73, 108, 60
92, 92, 92
85, 98, 80
Exemples CSS
Texte
La propriété CSS permettant de changer la couleur du texte en RVB 73, 108, 60 est appelée « couleur ». 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 dans la couleur rgb(73, 108, 60).
📋 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’ombre de texte CSS.
Vous voyez ici à quoi ressemble un texte noir avec une ombre de couleur rgb(73, 108, 60) de 4 pixels.
📋 Copy Code
Border
La propriété CSS permettant de changer la bordure d’un élément en RGB 73, 108, 60 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 ».
📋 Copy Code
Si seule la couleur de la bordure doit être modifiée, utilisez la propriété border-color.
📋 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 colorée de 4 pixels rgb(73, 108, 60).
📋 Copy Code
Background
La propriété CSS pour changer la couleur d’arrière-plan d’un élément en RGB 73, 108, 60 est appelée « background ». La propriété background peut être définie sur les classes, les ids ou directement sur l’élément HTML.
📋 Copy Code
Si seule la couleur d’arrière-plan doit être modifiée peut être utilisée :
📋 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 voulez créer un dégradé linéaire ou radial comme arrière-plan ou bordure, consultez notre 🌈 Générateur de dégradés CSS.
📕 HOWCOLORS.WORK
Un guide de notation des couleurs 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, « 496C3C », 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 « 104°, 44%, 42% », 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(104°, 44%, 42%) » vous donnera la couleur HSV correcte car il n’est pas nécessaire de deviner le format. D’autres exemples seraient « CIELAB(41,95, -22,52, 22,92) », « CIELCH(42, 32,133, 134,485) », « YXY(12,4678, 0,3233, 0,4517) » et « CMYK(0,32, 0,00, 0,44, 0,58) ».
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 visualiser 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 de fond.
Previews
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 de couleur 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 comment cette couleur est perçue par toute personne ayant une déficience de la vision des couleurs. Par conséquent, 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 d’avant-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 en tant que palette GIMP, Adobe® ASE, ou Tailwind CSS. En outre, vous pouvez tout visualiser comme un 🌈 dégradé CSS, 🔧 ombre de texte CSS, ou 📷 image de palette de couleurs.
Pour ajouter une couleur à votre seau de couleurs, j’ai mis 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 selon les directives d’accessibilité au contenu Web (WCAG) 2.0.
.