Benannte Farbe · #BDD4D1
Coast to Coast
Coast to Coast ist #BDD4D1: rgb(189 212 209), hsl(172 21% 79%), oklch(0.852 0.025 187.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Coast to Coast color name →
#BDD4D1
oklch(0.852 0.025 187.2)
Farbumrechnungen
- HEX
- #bdd4d1
- RGB
- rgb(189 212 209)
- HSL
- hsl(172 21% 79%)
- HWB
- hwb(172 74% 17%)
- OKLCH
- oklch(0.852 0.025 187.2)
- OKLab
- oklab(0.852 -0.025 -0.003)
- CIE Lab
- lab(83.12 -8.42 -1.27)
- LCH
- lch(83.12 8.52 188.6)
- CMYK
- cmyk(11% 0% 1% 17%)
Tints · Shades · Tones
Tints
- C4D8D6
- CADDDA
- D1E1DF
- D7E5E3
- DEE9E8
- E4EEEC
- EBF2F1
- F2F6F6
- F8FBFA
Shades
- A4B8B5
- 8C9D9B
- 748381
- 5D6968
- 475150
- 333A39
- 1F2423
- 0D1010
- 020202
Tones
- B7CBC9
- B1C3C0
- AABAB8
- A4B2B0
- 9EA9A8
- 98A1A0
- 929898
- 8C9090
- 868888
Farbharmonien
Komplementär +180°
- BDD4D1
Coast to Coast
- DEC8CB
≈ Kellie Belle
Analog -30° +30°
- BDD4D1
Coast to Coast
- C2D4C8
≈ Soft Fresco
- BDD3D9
≈ Light Salt Spray
Triadisch +120° +240°
- BDD4D1
Coast to Coast
- D3CADC
≈ Languid Lavender
- DACCBE
≈ Bermuda Sand
Geteilt komplementär +150° +210°
- BDD4D1
Coast to Coast
- DAC8D4
≈ Sleepy Kisses
- DEC9C3
≈ Kangaroo Paw
Tetradisch +90° +180° +270°
- BDD4D1
Coast to Coast
- CACDDF
≈ Blueberry Mist
- DEC8CB
≈ Kellie Belle
- D3CFBD
≈ Ocean Pearl
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.55:1 · APCA Lc 25
Ag
AAAAuf Schwarz
WCAG 13.50:1 · APCA Lc 78
Beste Textfarbe: #000000
WCAG 13.50:1 (AAA) · APCA Lc 78
Contrast pairs
Code-Snippets
CSS
:root {
--coast-to-coast: #bdd4d1;
--coast-to-coast-rgb: 189 212 209;
--coast-to-coast-oklch: oklch(0.852 0.025 187.2);
}
.element {
color: var(--coast-to-coast);
background-color: hsl(172 21% 79%);
border-color: oklch(0.852 0.025 187.2);
}Tailwind CSS v4
@theme {
--color-coast-to-coast: #bdd4d1;
--color-coast-to-coast-50: #eef8f6;
--color-coast-to-coast-100: #dfebe9;
--color-coast-to-coast-200: #c9d8d6;
--color-coast-to-coast-300: #aabcba;
--color-coast-to-coast-400: #8fa3a1;
--color-coast-to-coast-500: #748c89;
--color-coast-to-coast-600: #627674;
--color-coast-to-coast-700: #4f5f5d;
--color-coast-to-coast-800: #394543;
--color-coast-to-coast-900: #27302f;
--color-coast-to-coast-950: #151c1b;
}SCSS
$coast-to-coast: #bdd4d1;
$coast-to-coast-rgb: 189, 212, 209;
$coast-to-coast-light: mix(#fff, $coast-to-coast, 20%);
$coast-to-coast-dark: mix(#000, $coast-to-coast, 20%);
.element {
color: $coast-to-coast;
box-shadow: 0 0 0 2px rgba($coast-to-coast, 0.35);
}