Benannte Farbe · #DFE9E6
Calm
Calm ist #DFE9E6: rgb(223 233 230), hsl(162 19% 89%), oklch(0.926 0.011 176.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Calm color name →
#DFE9E6
oklch(0.926 0.011 176.3)
Farbumrechnungen
- HEX
- #dfe9e6
- RGB
- rgb(223 233 230)
- HSL
- hsl(162 19% 89%)
- HWB
- hwb(162 87% 9%)
- OKLCH
- oklch(0.926 0.011 176.3)
- OKLab
- oklab(0.926 -0.011 0.001)
- CIE Lab
- lab(91.52 -3.86 0.24)
- LCH
- lch(91.52 3.87 176.4)
- CMYK
- cmyk(4% 0% 1% 9%)
Tints · Shades · Tones
Tints
- E2EBE8
- E5EDEB
- E9F0ED
- ECF2F0
- EFF4F2
- F2F6F5
- F5F8F7
- F9FBFA
- FCFDFC
Shades
- C2CBC8
- A5ADAB
- 8A908E
- 6F7473
- 565A59
- 3D4140
- 272928
- 121313
- 020303
Tones
- D5DEDB
- CBD3D1
- C2C8C6
- B8BEBC
- AEB3B2
- A5A9A7
- 9B9E9D
- 929493
- 898A8A
Farbharmonien
Komplementär +180°
- DFE9E6
Calm
- EDE3E6
≈ Delicacy White
Analog -30° +30°
- DFE9E6
Calm
- E2E9E2
≈ Poetic Licence
- DEE9EA
≈ Wave Crest
Triadisch +120° +240°
- DFE9E6
Calm
- E7E5ED
≈ Iris Isle
- EDE5DF
≈ Aimee
Geteilt komplementär +150° +210°
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.23:1 · APCA Lc 12
Ag
AAAAuf Schwarz
WCAG 16.93:1 · APCA Lc 92
Beste Textfarbe: #000000
WCAG 16.93:1 (AAA) · APCA Lc 92
Contrast pairs
Code-Snippets
CSS
:root {
--calm: #dfe9e6;
--calm-rgb: 223 233 230;
--calm-oklch: oklch(0.926 0.011 176.3);
}
.element {
color: var(--calm);
background-color: hsl(162 19% 89%);
border-color: oklch(0.926 0.011 176.3);
}Tailwind CSS v4
@theme {
--color-calm: #dfe9e6;
--color-calm-50: #f2f6f5;
--color-calm-100: #e4e9e8;
--color-calm-200: #cfd6d4;
--color-calm-300: #b2b9b7;
--color-calm-400: #98a19e;
--color-calm-500: #7f8986;
--color-calm-600: #6b7471;
--color-calm-700: #565d5b;
--color-calm-800: #3f4442;
--color-calm-900: #2b2f2e;
--color-calm-950: #181b1a;
}SCSS
$calm: #dfe9e6;
$calm-rgb: 223, 233, 230;
$calm-light: mix(#fff, $calm, 20%);
$calm-dark: mix(#000, $calm, 20%);
.element {
color: $calm;
box-shadow: 0 0 0 2px rgba($calm, 0.35);
}