Couleur nommée la plus proche · #37722C
#37722C
Couleur nommée la plus proche: Cucumber Queen
#37722C (rgb(55 114 44), hsl(111 44% 31%), oklch(0.496 0.12 140.6)) est la plus proche de la couleur nommée Cucumber Queen. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#37722C
oklch(0.496 0.12 140.6)
Conversions de couleur
- HEX
- #37722c
- RGB
- rgb(55 114 44)
- HSL
- hsl(111 44% 31%)
- HWB
- hwb(111 17% 55%)
- OKLCH
- oklch(0.496 0.12 140.6)
- OKLab
- oklab(0.496 -0.093 0.076)
- CIE Lab
- lab(42.86 -31.13 31.83)
- LCH
- lch(42.86 44.52 134.4)
- CMYK
- cmyk(52% 0% 61% 55%)
Teintes · Ombres · Tons
Teintes
- 4B8041
- 5F8D56
- 729B6A
- 86A97F
- 99B793
- ADC5A8
- C1D4BE
- D6E2D3
- EAF0E9
Ombres
- 2E6225
- 26531E
- 1E4417
- 163611
- 0F280A
- 081B05
- 030E02
- 010401
- 000100
Tons
- 407436
- 48753F
- 4F7748
- 577850
- 5E7A59
- 657B61
- 6C7D69
- 737E70
- 797F78
Harmonies de couleurs
Complémentaire +180°
- 37722C
Cucumber Queen
- 80488B
≈ Prunella
Analogue -30° +30°
- 37722C
Cucumber Queen
- 666700
≈ Earthy Khaki Green
- 00735A
≈ Tropical Rainforest
Triadique +120° +240°
- 37722C
Cucumber Queen
- 3860A5
≈ International
- 9B4144
≈ Reddest Red
Complémentaire divisée +150° +210°
- 37722C
Cucumber Queen
- 6353A0
≈ Purple Opulence
- 93416B
≈ Dynamo
Tétradique +90° +180° +270°
- 37722C
Cucumber Queen
- 006B90
≈ Pure Light Blue
- 80488B
≈ Prunella
- 964A13
≈ Nightcap
Contraste et accessibilité
Ag
AASur blanc
WCAG 5.82:1 · APCA Lc 79
Ag
FailSur noir
WCAG 3.60:1 · APCA Lc 23
Meilleure couleur de texte: #FFFFFF
WCAG 5.82:1 (AA) · APCA Lc 79
Contrast pairs
Extraits de code
CSS
:root {
--cucumber-queen: #37722c;
--cucumber-queen-rgb: 55 114 44;
--cucumber-queen-oklch: oklch(0.496 0.12 140.6);
}
.element {
color: var(--cucumber-queen);
background-color: hsl(111 44% 31%);
border-color: oklch(0.496 0.12 140.6);
}Tailwind CSS v4
@theme {
--color-cucumber-queen: #37722c;
--color-cucumber-queen-50: #e2ffdf;
--color-cucumber-queen-100: #d2f3ce;
--color-cucumber-queen-200: #b7e2b3;
--color-cucumber-queen-300: #93c78f;
--color-cucumber-queen-400: #76b06c;
--color-cucumber-queen-500: #56994a;
--color-cucumber-queen-600: #4a823f;
--color-cucumber-queen-700: #3b6832;
--color-cucumber-queen-800: #2c4c21;
--color-cucumber-queen-900: #1d3516;
--color-cucumber-queen-950: #0d2007;
}SCSS
$cucumber-queen: #37722c;
$cucumber-queen-rgb: 55, 114, 44;
$cucumber-queen-light: mix(#fff, $cucumber-queen, 20%);
$cucumber-queen-dark: mix(#000, $cucumber-queen, 20%);
.element {
color: $cucumber-queen;
box-shadow: 0 0 0 2px rgba($cucumber-queen, 0.35);
}