Nazwany kolor · #AFDDCC
Brook Green
Brook Green to #AFDDCC: rgb(175 221 204), hsl(158 40% 78%), oklch(0.86 0.053 170.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Brook Green color name →
#AFDDCC
oklch(0.86 0.053 170.5)
Konwersje koloru
- HEX
- #afddcc
- RGB
- rgb(175 221 204)
- HSL
- hsl(158 40% 78%)
- HWB
- hwb(158 69% 13%)
- OKLCH
- oklch(0.86 0.053 170.5)
- OKLab
- oklab(0.86 -0.053 0.009)
- CIE Lab
- lab(84.5 -18.08 3.21)
- LCH
- lch(84.5 18.36 169.9)
- CMYK
- cmyk(21% 0% 8% 13%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B7E0D1
- BFE4D6
- C7E7DB
- CFEBE0
- D7EEE5
- DFF1EA
- E7F5EF
- EFF8F5
- F7FCFA
Odcienie ciemniejsze
- 98C0B1
- 81A497
- 6B887E
- 566E65
- 41554E
- 2E3D37
- 1C2622
- 0B110F
- 010202
Tony
- AAD3C4
- A6CABC
- A1C0B5
- 9DB7AD
- 98ADA5
- 93A49E
- 8E9B96
- 8A928F
- 858987
Harmonie kolorów
Komplementarna +180°
- AFDDCC
Brook Green
- EEC3D6
≈ Tussie-Mussie
Analogowa -30° +30°
- AFDDCC
Brook Green
- BFDAB9
≈ Grasshopper Pie
- A8DCDF
≈ Geyser Pool
Triada +120° +240°
- AFDDCC
Brook Green
- D0CCF2
≈ Miami White
- EFC8B2
≈ Sweet Pastel
Komplementarna rozszczepiona +150° +210°
- AFDDCC
Brook Green
- E1C6E7
≈ Prom Corsage
- F2C4C2
≈ My Fair Lady
Tetrada +90° +180° +270°
- AFDDCC
Brook Green
- BDD2F5
≈ Frost Fairy
- EEC3D6
≈ Tussie-Mussie
- E4CEAA
≈ Dried Plantain
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.49:1 · APCA Lc 23
Ag
AAANa czerni
WCAG 14.03:1 · APCA Lc 80
Najlepszy kolor tekstu: #000000
WCAG 14.03:1 (AAA) · APCA Lc 80
Contrast pairs
Fragmenty kodu
CSS
:root {
--brook-green: #afddcc;
--brook-green-rgb: 175 221 204;
--brook-green-oklch: oklch(0.86 0.053 170.5);
}
.element {
color: var(--brook-green);
background-color: hsl(158 40% 78%);
border-color: oklch(0.86 0.053 170.5);
}Tailwind CSS v4
@theme {
--color-brook-green: #afddcc;
--color-brook-green-50: #e7faf3;
--color-brook-green-100: #d7eee6;
--color-brook-green-200: #bedcd2;
--color-brook-green-300: #9cc1b4;
--color-brook-green-400: #7fa99a;
--color-brook-green-500: #619281;
--color-brook-green-600: #537b6d;
--color-brook-green-700: #426357;
--color-brook-green-800: #30483f;
--color-brook-green-900: #20322b;
--color-brook-green-950: #101e19;
}SCSS
$brook-green: #afddcc;
$brook-green-rgb: 175, 221, 204;
$brook-green-light: mix(#fff, $brook-green, 20%);
$brook-green-dark: mix(#000, $brook-green, 20%);
.element {
color: $brook-green;
box-shadow: 0 0 0 2px rgba($brook-green, 0.35);
}