Benannte Farbe · #D9DDE7
Sweet Harbour
Sweet Harbour ist #D9DDE7: rgb(217 221 231), hsl(223 23% 88%), oklch(0.897 0.014 268.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Sweet Harbour color name →
#D9DDE7
oklch(0.897 0.014 268.5)
Farbumrechnungen
- HEX
- #d9dde7
- RGB
- rgb(217 221 231)
- HSL
- hsl(223 23% 88%)
- HWB
- hwb(223 85% 9%)
- OKLCH
- oklch(0.897 0.014 268.5)
- OKLab
- oklab(0.897 0 -0.014)
- CIE Lab
- lab(88.02 -0.01 -5.41)
- LCH
- lch(88.02 5.41 269.9)
- CMYK
- cmyk(6% 4% 0% 9%)
Tints · Shades · Tones
Tints
- DDE0E9
- E1E4EC
- E4E7EE
- E8EBF1
- ECEEF3
- F0F1F5
- F3F5F8
- F7F8FA
- FBFCFD
Shades
- BCC0C9
- A1A4AB
- 86888F
- 6C6E73
- 535559
- 3B3D40
- 252628
- 111113
- 020203
Tones
- D0D3DC
- C7CAD2
- BDC0C7
- B4B7BD
- ABADB2
- A3A4A8
- 9A9B9E
- 919294
- 88898A
Farbharmonien
Komplementär +180°
- D9DDE7
Sweet Harbour
- E1DDD3
≈ Clear Stone
Analog -30° +30°
- D9DDE7
Sweet Harbour
- D5DFE6
≈ Blustery Day
- DEDBE6
≈ Pale Orchid
Triadisch +120° +240°
- D9DDE7
Sweet Harbour
- E7DAD8
≈ Light Porcelain
- D7E0D8
≈ Juniper Breeze
Geteilt komplementär +150° +210°
- D9DDE7
Sweet Harbour
- E5DBD4
≈ Hush White
- DCDFD4
≈ Angel’s Whisper
Tetradisch +90° +180° +270°
- D9DDE7
Sweet Harbour
- E6D9DD
≈ Faded Firebrick
- E1DDD3
≈ Clear Stone
- D4E0DD
≈ Spring Mist
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.35:1 · APCA Lc 18
Ag
AAAAuf Schwarz
WCAG 15.44:1 · APCA Lc 86
Beste Textfarbe: #000000
WCAG 15.44:1 (AAA) · APCA Lc 86
Contrast pairs
Code-Snippets
CSS
:root {
--sweet-harbour: #d9dde7;
--sweet-harbour-rgb: 217 221 231;
--sweet-harbour-oklch: oklch(0.897 0.014 268.5);
}
.element {
color: var(--sweet-harbour);
background-color: hsl(223 23% 88%);
border-color: oklch(0.897 0.014 268.5);
}Tailwind CSS v4
@theme {
--color-sweet-harbour: #d9dde7;
--color-sweet-harbour-50: #f3f5f9;
--color-sweet-harbour-100: #e6e8ed;
--color-sweet-harbour-200: #d2d4db;
--color-sweet-harbour-300: #b4b7bf;
--color-sweet-harbour-400: #9b9ea7;
--color-sweet-harbour-500: #828690;
--color-sweet-harbour-600: #6e717a;
--color-sweet-harbour-700: #585b61;
--color-sweet-harbour-800: #404247;
--color-sweet-harbour-900: #2c2e32;
--color-sweet-harbour-950: #191b1d;
}SCSS
$sweet-harbour: #d9dde7;
$sweet-harbour-rgb: 217, 221, 231;
$sweet-harbour-light: mix(#fff, $sweet-harbour, 20%);
$sweet-harbour-dark: mix(#000, $sweet-harbour, 20%);
.element {
color: $sweet-harbour;
box-shadow: 0 0 0 2px rgba($sweet-harbour, 0.35);
}