Adlandırılmış renk · #8AA277
Antilles Garden
Antilles Garden, #8AA277: rgb(138 162 119), hsl(93 19% 55%), oklch(0.682 0.067 131.7). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Green mean? → · Antilles Garden color name →
#8AA277
oklch(0.682 0.067 131.7)
Renk dönüşümleri
- HEX
- #8aa277
- RGB
- rgb(138 162 119)
- HSL
- hsl(93 19% 55%)
- HWB
- hwb(93 47% 36%)
- OKLCH
- oklch(0.682 0.067 131.7)
- OKLab
- oklab(0.682 -0.044 0.05)
- CIE Lab
- lab(63.9 -14.72 19.55)
- LCH
- lch(63.9 24.47 127)
- CMYK
- cmyk(15% 0% 27% 36%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- 95AB84
- A0B491
- ACBD9F
- B7C7AC
- C3D0BA
- CFD9C7
- DBE3D5
- E7ECE3
- F3F5F1
Koyu tonlar
- 778C67
- 657757
- 536347
- 424F38
- 323C2A
- 222A1C
- 141910
- 070A05
- 010101
Gri tonlar
- 899F78
- 889B79
- 87987A
- 86947B
- 85917C
- 848E7D
- 838A7E
- 82877F
- 81837F
Renk uyumları
Tamamlayıcı +180°
- 8AA277
Antilles Garden
- A78DB7
≈ East Side
Analog -30° +30°
- 8AA277
Antilles Garden
- A19B6A
≈ Stilted Stalks
- 73A68C
≈ Free Green
Üçlü +120° +240°
- 8AA277
Antilles Garden
- 7B9CC2
≈ Cottage Blue
- BE888E
≈ Rosenkavalier
Bölünmüş tamamlayıcı +150° +210°
- 8AA277
Antilles Garden
- 9294C2
≈ Easter Egg
- B689A5
≈ A Plum Job
Dörtlü +90° +180° +270°
- 8AA277
Antilles Garden
- 69A3B7
≈ Pacific Palisade
- A78DB7
≈ East Side
- BD8C79
≈ Suntan Glow
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 2.79:1 · APCA Lc 54
Ag
AAASiyah üzerinde
WCAG 7.51:1 · APCA Lc 48
En iyi metin rengi: #000000
WCAG 7.51:1 (AAA) · APCA Lc 48
Contrast pairs
Kod parçacıkları
CSS
:root {
--antilles-garden: #8aa277;
--antilles-garden-rgb: 138 162 119;
--antilles-garden-oklch: oklch(0.682 0.067 131.7);
}
.element {
color: var(--antilles-garden);
background-color: hsl(93 19% 55%);
border-color: oklch(0.682 0.067 131.7);
}Tailwind CSS v4
@theme {
--color-antilles-garden: #8aa277;
--color-antilles-garden-50: #eefae6;
--color-antilles-garden-100: #dfedd7;
--color-antilles-garden-200: #c9dbbe;
--color-antilles-garden-300: #aabf9d;
--color-antilles-garden-400: #90a77e;
--color-antilles-garden-500: #769061;
--color-antilles-garden-600: #647a53;
--color-antilles-garden-700: #506142;
--color-antilles-garden-800: #3b472e;
--color-antilles-garden-900: #28311f;
--color-antilles-garden-950: #161d0f;
}SCSS
$antilles-garden: #8aa277;
$antilles-garden-rgb: 138, 162, 119;
$antilles-garden-light: mix(#fff, $antilles-garden, 20%);
$antilles-garden-dark: mix(#000, $antilles-garden, 20%);
.element {
color: $antilles-garden;
box-shadow: 0 0 0 2px rgba($antilles-garden, 0.35);
}