En yakın adlandırılmış renk · #37722C
#37722C
En yakın adlandırılmış renk: Cucumber Queen
#37722C (rgb(55 114 44), hsl(111 44% 31%), oklch(0.496 0.12 140.6)) en çok Cucumber Queen adlı renge yakındır. Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
#37722C
oklch(0.496 0.12 140.6)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 4B8041
- 5F8D56
- 729B6A
- 86A97F
- 99B793
- ADC5A8
- C1D4BE
- D6E2D3
- EAF0E9
Koyu tonlar
- 2E6225
- 26531E
- 1E4417
- 163611
- 0F280A
- 081B05
- 030E02
- 010401
- 000100
Gri tonlar
- 407436
- 48753F
- 4F7748
- 577850
- 5E7A59
- 657B61
- 6C7D69
- 737E70
- 797F78
Renk uyumları
Tamamlayıcı +180°
- 37722C
Cucumber Queen
- 80488B
≈ Prunella
Analog -30° +30°
- 37722C
Cucumber Queen
- 666700
≈ Earthy Khaki Green
- 00735A
≈ Tropical Rainforest
Üçlü +120° +240°
- 37722C
Cucumber Queen
- 3860A5
≈ International
- 9B4144
≈ Reddest Red
Bölünmüş tamamlayıcı +150° +210°
- 37722C
Cucumber Queen
- 6353A0
≈ Purple Opulence
- 93416B
≈ Dynamo
Dörtlü +90° +180° +270°
- 37722C
Cucumber Queen
- 006B90
≈ Pure Light Blue
- 80488B
≈ Prunella
- 964A13
≈ Nightcap
Kontrast ve erişilebilirlik
Ag
AABeyaz üzerinde
WCAG 5.82:1 · APCA Lc 79
Ag
FailSiyah üzerinde
WCAG 3.60:1 · APCA Lc 23
En iyi metin rengi: #FFFFFF
WCAG 5.82:1 (AA) · APCA Lc 79
Contrast pairs
Kod parçacıkları
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);
}