Nazwany kolor · #BDD9D0
Serene Breeze
Serene Breeze to #BDD9D0: rgb(189 217 208), hsl(161 27% 80%), oklch(0.862 0.032 174.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Serene Breeze color name →
#BDD9D0
oklch(0.862 0.032 174.2)
Konwersje koloru
- HEX
- #bdd9d0
- RGB
- rgb(189 217 208)
- HSL
- hsl(161 27% 80%)
- HWB
- hwb(161 74% 15%)
- OKLCH
- oklch(0.862 0.032 174.2)
- OKLab
- oklab(0.862 -0.032 0.003)
- CIE Lab
- lab(84.43 -10.96 1.14)
- LCH
- lch(84.43 11.02 174)
- CMYK
- cmyk(13% 0% 4% 15%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C4DDD5
- CAE1D9
- D1E4DE
- D7E8E3
- DEECE7
- E5F0EC
- EBF4F1
- F2F7F5
- F8FBFA
Odcienie ciemniejsze
- A4BCB5
- 8CA19A
- 748680
- 5D6C67
- 47534F
- 333B39
- 1F2523
- 0D1110
- 020202
Tony
- B7D0C8
- B1C7BF
- AABDB7
- A4B4AF
- 9EABA7
- 98A39F
- 929A97
- 8C918F
- 868988
Harmonie kolorów
Komplementarna +180°
- BDD9D0
Serene Breeze
- E4C9D3
≈ Sweet and Sassy
Analogowa -30° +30°
- BDD9D0
Serene Breeze
- C5D8C5
≈ Marsh Fog
- BAD8DB
≈ Light Sky Chase
Triada +120° +240°
- BDD9D0
Serene Breeze
- D2CEE5
≈ Potentially Purple
- E3CDBE
≈ Life Is a Peach
Komplementarna rozszczepiona +150° +210°
- BDD9D0
Serene Breeze
- DDCBDE
≈ Decadial Pink
- E6CAC7
≈ Tangy Taffy
Tetrada +90° +180° +270°
- BDD9D0
Serene Breeze
- C7D2E8
≈ Arctic Glow
- E4C9D3
≈ Sweet and Sassy
- DCD0BA
≈ Ostrich Egg
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.50:1 · APCA Lc 23
Ag
AAANa czerni
WCAG 13.99:1 · APCA Lc 80
Najlepszy kolor tekstu: #000000
WCAG 13.99:1 (AAA) · APCA Lc 80
Contrast pairs
Fragmenty kodu
CSS
:root {
--serene-breeze: #bdd9d0;
--serene-breeze-rgb: 189 217 208;
--serene-breeze-oklch: oklch(0.862 0.032 174.2);
}
.element {
color: var(--serene-breeze);
background-color: hsl(161 27% 80%);
border-color: oklch(0.862 0.032 174.2);
}Tailwind CSS v4
@theme {
--color-serene-breeze: #bdd9d0;
--color-serene-breeze-50: #ecf8f5;
--color-serene-breeze-100: #ddece7;
--color-serene-breeze-200: #c7d9d4;
--color-serene-breeze-300: #a7bdb7;
--color-serene-breeze-400: #8ca59d;
--color-serene-breeze-500: #718d84;
--color-serene-breeze-600: #5f7870;
--color-serene-breeze-700: #4c605a;
--color-serene-breeze-800: #374641;
--color-serene-breeze-900: #26312d;
--color-serene-breeze-950: #141d1a;
}SCSS
$serene-breeze: #bdd9d0;
$serene-breeze-rgb: 189, 217, 208;
$serene-breeze-light: mix(#fff, $serene-breeze, 20%);
$serene-breeze-dark: mix(#000, $serene-breeze, 20%);
.element {
color: $serene-breeze;
box-shadow: 0 0 0 2px rgba($serene-breeze, 0.35);
}