Benannte Farbe · #35475B
Compass Blue
Compass Blue ist #35475B: rgb(53 71 91), hsl(212 26% 28%), oklch(0.391 0.041 251.5). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Compass Blue color name →
#35475B
oklch(0.391 0.041 251.5)
Farbumrechnungen
- HEX
- #35475b
- RGB
- rgb(53 71 91)
- HSL
- hsl(212 26% 28%)
- HWB
- hwb(212 21% 64%)
- OKLCH
- oklch(0.391 0.041 251.5)
- OKLab
- oklab(0.391 -0.013 -0.039)
- CIE Lab
- lab(29.27 -2.94 -14.33)
- LCH
- lch(29.27 14.63 258.4)
- CMYK
- cmyk(42% 22% 0% 64%)
Tints · Shades · Tones
Tints
- 47586A
- 59697A
- 6C7A89
- 808C99
- 949EAA
- A9B1BA
- BEC4CB
- D3D7DC
- E9EBEE
Shades
- 2D3D4E
- 253241
- 1D2835
- 151F29
- 0E161E
- 080D13
- 030609
- 010203
- 000000
Tones
- 3C4D5F
- 435262
- 4B5866
- 525D6A
- 5A636E
- 616971
- 696F75
- 707479
- 787A7C
Farbharmonien
Komplementär +180°
- 35475B
Compass Blue
- 53422D
≈ Garden Loam
Analog -30° +30°
- 35475B
Compass Blue
- 2B4B55
≈ Berry Blue Green
- 41435B
≈ Amphystine
Triadisch +120° +240°
- 35475B
Compass Blue
- 593C40
≈ Ancient Prunus
- 3D4A33
≈ Rifle Green
Geteilt komplementär +150° +210°
- 35475B
Compass Blue
- 593E34
≈ Thoroughfare
- 4A462C
≈ Tin Bitz
Tetradisch +90° +180° +270°
- 35475B
Compass Blue
- 553D4C
≈ Dark Fig Violet
- 53422D
≈ Garden Loam
- 314C3E
≈ Norfolk Green
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 9.52:1 · APCA Lc 92
Ag
FailAuf Schwarz
WCAG 2.20:1 · APCA Lc 10
Beste Textfarbe: #FFFFFF
WCAG 9.52:1 (AAA) · APCA Lc 92
Contrast pairs
Code-Snippets
CSS
:root {
--compass-blue: #35475b;
--compass-blue-rgb: 53 71 91;
--compass-blue-oklch: oklch(0.391 0.041 251.5);
}
.element {
color: var(--compass-blue);
background-color: hsl(212 26% 28%);
border-color: oklch(0.391 0.041 251.5);
}Tailwind CSS v4
@theme {
--color-compass-blue: #35475b;
--color-compass-blue-50: #edf6ff;
--color-compass-blue-100: #dfe9f6;
--color-compass-blue-200: #c8d6e6;
--color-compass-blue-300: #a9b9cd;
--color-compass-blue-400: #8da1b7;
--color-compass-blue-500: #7388a1;
--color-compass-blue-600: #617488;
--color-compass-blue-700: #4d5c6d;
--color-compass-blue-800: #384450;
--color-compass-blue-900: #262f38;
--color-compass-blue-950: #141b23;
}SCSS
$compass-blue: #35475b;
$compass-blue-rgb: 53, 71, 91;
$compass-blue-light: mix(#fff, $compass-blue, 20%);
$compass-blue-dark: mix(#000, $compass-blue, 20%);
.element {
color: $compass-blue;
box-shadow: 0 0 0 2px rgba($compass-blue, 0.35);
}