Benannte Farbe · #2F3F53
Waterhen Back
Waterhen Back ist #2F3F53: rgb(47 63 83), hsl(213 28% 25%), oklch(0.363 0.041 254.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Waterhen Back color name →
#2F3F53
oklch(0.363 0.041 254.3)
Farbumrechnungen
- HEX
- #2f3f53
- RGB
- rgb(47 63 83)
- HSL
- hsl(213 28% 25%)
- HWB
- hwb(213 18% 67%)
- OKLCH
- oklch(0.363 0.041 254.3)
- OKLab
- oklab(0.363 -0.011 -0.039)
- CIE Lab
- lab(25.92 -2.14 -14.32)
- LCH
- lch(25.92 14.48 261.5)
- CMYK
- cmyk(43% 24% 0% 67%)
Tints · Shades · Tones
Tints
- 415063
- 546273
- 687483
- 7C8794
- 909AA5
- A6ADB7
- BBC1C8
- D1D5DA
- E8EAED
Shades
- 273547
- 202C3B
- 192330
- 121B25
- 0C121B
- 060A11
- 030408
- 010102
- 000000
Tones
- 374558
- 3E4C5C
- 465261
- 4E5865
- 565F6A
- 5E656E
- 676C73
- 6F7377
- 77797C
Farbharmonien
Komplementär +180°
- 2F3F53
Waterhen Back
- 4B3B25
≈ Witch’s Cottage
Analog -30° +30°
- 2F3F53
Waterhen Back
- 25434E
≈ Winter Waves
- 3B3B53
≈ Carbon Blue
Triadisch +120° +240°
- 2F3F53
Waterhen Back
- 513537
≈ Nectar of the Gods
- 35432D
≈ Deep Seaweed
Geteilt komplementär +150° +210°
- 2F3F53
Waterhen Back
- 50372C
≈ Bramble Bush
- 413F25
≈ Scorched Metal
Tetradisch +90° +180° +270°
- 2F3F53
Waterhen Back
- 4D3543
≈ Velvet Touch
- 4B3B25
≈ Witch’s Cottage
- 294538
≈ Mushiao Green
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 10.73:1 · APCA Lc 95
Ag
FailAuf Schwarz
WCAG 1.95:1 · APCA Lc 8
Beste Textfarbe: #FFFFFF
WCAG 10.73:1 (AAA) · APCA Lc 95
Contrast pairs
Code-Snippets
CSS
:root {
--waterhen-back: #2f3f53;
--waterhen-back-rgb: 47 63 83;
--waterhen-back-oklch: oklch(0.363 0.041 254.3);
}
.element {
color: var(--waterhen-back);
background-color: hsl(213 28% 25%);
border-color: oklch(0.363 0.041 254.3);
}Tailwind CSS v4
@theme {
--color-waterhen-back: #2f3f53;
--color-waterhen-back-50: #eef6ff;
--color-waterhen-back-100: #dfe9f6;
--color-waterhen-back-200: #c9d5e6;
--color-waterhen-back-300: #aab9cc;
--color-waterhen-back-400: #8ea0b7;
--color-waterhen-back-500: #7488a1;
--color-waterhen-back-600: #627388;
--color-waterhen-back-700: #4f5c6d;
--color-waterhen-back-800: #384350;
--color-waterhen-back-900: #272f38;
--color-waterhen-back-950: #151b23;
}SCSS
$waterhen-back: #2f3f53;
$waterhen-back-rgb: 47, 63, 83;
$waterhen-back-light: mix(#fff, $waterhen-back, 20%);
$waterhen-back-dark: mix(#000, $waterhen-back, 20%);
.element {
color: $waterhen-back;
box-shadow: 0 0 0 2px rgba($waterhen-back, 0.35);
}