Couleur nommée · #B3EBE0
Gentle Giant
Gentle Giant correspond à #B3EBE0 : rgb(179 235 224), hsl(168 58% 81%), oklch(0.899 0.059 181.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Teal mean? → · Gentle Giant color name →
#B3EBE0
oklch(0.899 0.059 181.5)
Conversions de couleur
- HEX
- #b3ebe0
- RGB
- rgb(179 235 224)
- HSL
- hsl(168 58% 81%)
- HWB
- hwb(168 70% 8%)
- OKLCH
- oklch(0.899 0.059 181.5)
- OKLab
- oklab(0.899 -0.059 -0.002)
- CIE Lab
- lab(88.97 -20.18 -0.76)
- LCH
- lch(88.97 20.19 182.2)
- CMYK
- cmyk(24% 0% 5% 8%)
Teintes · Ombres · Tons
Teintes
- BBEDE3
- C3EFE6
- CBF1E9
- D2F3EC
- DAF5EF
- E1F7F3
- E9F9F6
- F0FBF9
- F8FDFC
Ombres
- 9BCCC3
- 84AEA6
- 6E918A
- 587570
- 435B56
- 2F413E
- 1D2927
- 0C1312
- 010302
Tons
- AEE0D6
- A9D5CC
- A4CAC2
- 9FBFB8
- 9AB4AF
- 95AAA5
- 909F9C
- 8B9592
- 858A89
Harmonies de couleurs
Complémentaire +180°
- B3EBE0
Gentle Giant
- FFCFDB
≈ Bologna Sausage
Analogue -30° +30°
- B3EBE0
Gentle Giant
- C2E9CA
≈ Granny Apple
- B1E9F4
≈ Winter Escape
Triadique +120° +240°
- B3EBE0
Gentle Giant
- E4D5FF
≈ Pale Lavender
- FBD6B6
≈ Gentle Caress
Complémentaire divisée +150° +210°
- B3EBE0
Gentle Giant
- F6D0F0
≈ Little Smile
- FFD1C8
≈ Snow Pa
Tétradique +90° +180° +270°
- B3EBE0
Gentle Giant
- D2DCFF
≈ Arc Light
- FFCFDB
≈ Bologna Sausage
- ECDDB2
≈ Jodhpurs
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.32:1 · APCA Lc 16
Ag
AAASur noir
WCAG 15.87:1 · APCA Lc 88
Meilleure couleur de texte: #000000
WCAG 15.87:1 (AAA) · APCA Lc 88
Contrast pairs
Extraits de code
CSS
:root {
--gentle-giant: #b3ebe0;
--gentle-giant-rgb: 179 235 224;
--gentle-giant-oklch: oklch(0.899 0.059 181.5);
}
.element {
color: var(--gentle-giant);
background-color: hsl(168 58% 81%);
border-color: oklch(0.899 0.059 181.5);
}Tailwind CSS v4
@theme {
--color-gentle-giant: #b3ebe0;
--color-gentle-giant-50: #e4fbf7;
--color-gentle-giant-100: #d3efea;
--color-gentle-giant-200: #b9ddd7;
--color-gentle-giant-300: #96c2ba;
--color-gentle-giant-400: #77aaa1;
--color-gentle-giant-500: #579389;
--color-gentle-giant-600: #4b7d74;
--color-gentle-giant-700: #3b645c;
--color-gentle-giant-800: #2b4943;
--color-gentle-giant-900: #1d332e;
--color-gentle-giant-950: #0c1e1b;
}SCSS
$gentle-giant: #b3ebe0;
$gentle-giant-rgb: 179, 235, 224;
$gentle-giant-light: mix(#fff, $gentle-giant, 20%);
$gentle-giant-dark: mix(#000, $gentle-giant, 20%);
.element {
color: $gentle-giant;
box-shadow: 0 0 0 2px rgba($gentle-giant, 0.35);
}