Adlandırılmış renk · #228B22
Summer Forest Green
Summer Forest Green, #228B22: rgb(34 139 34), hsl(120 61% 34%), oklch(0.558 0.169 142.9). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Green mean? → · Summer Forest Green color name →
#228B22
oklch(0.558 0.169 142.9)
Renk dönüşümleri
- HEX
- #228b22
- RGB
- rgb(34 139 34)
- HSL
- hsl(120 61% 34%)
- HWB
- hwb(120 13% 45%)
- OKLCH
- oklch(0.558 0.169 142.9)
- OKLab
- oklab(0.558 -0.135 0.102)
- CIE Lab
- lab(50.64 -45.72 44.03)
- LCH
- lch(50.64 63.47 136.1)
- CMYK
- cmyk(76% 0% 76% 45%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 40973D
- 58A254
- 6EAE6A
- 83BA7F
- 98C594
- ACD1A9
- C1DCBE
- D5E8D4
- EAF4E9
Koyu tonlar
- 1C781C
- 166616
- 115411
- 0B430B
- 073207
- 032303
- 011401
- 000700
- 000100
Gri tonlar
- 338A30
- 3F8A3C
- 4A8946
- 538850
- 5C8759
- 648661
- 6B8569
- 728371
- 798278
Renk uyumları
Tamamlayıcı +180°
- 228B22
Summer Forest Green
- A14AAC
≈ Purpureus
Analog -30° +30°
- 228B22
Summer Forest Green
- 757B00
≈ Flag Green
- 00886E
≈ Celtic Queen
Üçlü +120° +240°
- 228B22
Summer Forest Green
- 3C6DD5
≈ Han Blue
- C33E42
≈ Bloody Safflower
Bölünmüş tamamlayıcı +150° +210°
- 228B22
Summer Forest Green
- 7A5ACC
≈ Fuchsia Blue
- B93F7C
≈ Razzle Dazzle
Dörtlü +90° +180° +270°
- 228B22
Summer Forest Green
- 007EAC
≈ Neptune
- A14AAC
≈ Purpureus
- B25700
≈ Elm Brown Red
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 4.38:1 · APCA Lc 70
Ag
AASiyah üzerinde
WCAG 4.78:1 · APCA Lc 32
En iyi metin rengi: #000000
WCAG 4.78:1 (AA) · APCA Lc 32
Contrast pairs
Kod parçacıkları
CSS
:root {
--summer-forest-green: #228b22;
--summer-forest-green-rgb: 34 139 34;
--summer-forest-green-oklch: oklch(0.558 0.169 142.9);
}
.element {
color: var(--summer-forest-green);
background-color: hsl(120 61% 34%);
border-color: oklch(0.558 0.169 142.9);
}Tailwind CSS v4
@theme {
--color-summer-forest-green: #228b22;
--color-summer-forest-green-50: #d8ffd8;
--color-summer-forest-green-100: #c5f8c5;
--color-summer-forest-green-200: #a6e8a7;
--color-summer-forest-green-300: #7dce80;
--color-summer-forest-green-400: #5ab757;
--color-summer-forest-green-500: #2ba02b;
--color-summer-forest-green-600: #278826;
--color-summer-forest-green-700: #1f6d1e;
--color-summer-forest-green-800: #1a5010;
--color-summer-forest-green-900: #11380a;
--color-summer-forest-green-950: #032200;
}SCSS
$summer-forest-green: #228b22;
$summer-forest-green-rgb: 34, 139, 34;
$summer-forest-green-light: mix(#fff, $summer-forest-green, 20%);
$summer-forest-green-dark: mix(#000, $summer-forest-green, 20%);
.element {
color: $summer-forest-green;
box-shadow: 0 0 0 2px rgba($summer-forest-green, 0.35);
}