Benannte Farbe · #185887
Stunning Sapphire
Stunning Sapphire ist #185887: rgb(24 88 135), hsl(205 70% 31%), oklch(0.445 0.099 245.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Stunning Sapphire color name →
#185887
oklch(0.445 0.099 245.4)
Farbumrechnungen
- HEX
- #185887
- RGB
- rgb(24 88 135)
- HSL
- hsl(205 70% 31%)
- HWB
- hwb(205 9% 47%)
- OKLCH
- oklch(0.445 0.099 245.4)
- OKLab
- oklab(0.445 -0.041 -0.09)
- CIE Lab
- lab(35.34 -6.69 -32.47)
- LCH
- lch(35.34 33.15 258.4)
- CMYK
- cmyk(82% 35% 0% 47%)
Tints · Shades · Tones
Tints
- 336893
- 4A789F
- 6088AB
- 7699B7
- 8CA9C3
- A2BACF
- B9CBDB
- D0DCE7
- E7EDF3
Shades
- 134B75
- 0F3F63
- 0A3351
- 072841
- 041D31
- 021221
- 010913
- 000306
- 000001
Tones
- 275C87
- 336186
- 3E6586
- 486985
- 526D85
- 5B7184
- 657583
- 6E7982
- 777C81
Farbharmonien
Komplementär +180°
- 185887
Stunning Sapphire
- 784600
≈ Dusky Brown
Analog -30° +30°
- 185887
Stunning Sapphire
- 005E6F
≈ Shaded Spruce
- 454E8A
≈ Beaded Blue
Triadisch +120° +240°
- 185887
Stunning Sapphire
- 80394C
≈ Camelot
- 475D16
≈ Kyuri Green
Geteilt komplementär +150° +210°
- 185887
Stunning Sapphire
- 823D2B
≈ Grill Master
- 645300
≈ Olive Brown
Tetradisch +90° +180° +270°
- 185887
Stunning Sapphire
- 753D69
≈ Burnt Orchid
- 784600
≈ Dusky Brown
- 15643B
≈ Fun Green
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.54:1 · APCA Lc 86
Ag
FailAuf Schwarz
WCAG 2.78:1 · APCA Lc 16
Beste Textfarbe: #FFFFFF
WCAG 7.54:1 (AAA) · APCA Lc 86
Contrast pairs
Code-Snippets
CSS
:root {
--stunning-sapphire: #185887;
--stunning-sapphire-rgb: 24 88 135;
--stunning-sapphire-oklch: oklch(0.445 0.099 245.4);
}
.element {
color: var(--stunning-sapphire);
background-color: hsl(205 70% 31%);
border-color: oklch(0.445 0.099 245.4);
}Tailwind CSS v4
@theme {
--color-stunning-sapphire: #185887;
--color-stunning-sapphire-50: #dff9ff;
--color-stunning-sapphire-100: #ceecff;
--color-stunning-sapphire-200: #b3d9fd;
--color-stunning-sapphire-300: #8ebde8;
--color-stunning-sapphire-400: #6ba4d6;
--color-stunning-sapphire-500: #488cc4;
--color-stunning-sapphire-600: #3e77a5;
--color-stunning-sapphire-700: #315f85;
--color-stunning-sapphire-800: #204662;
--color-stunning-sapphire-900: #153045;
--color-stunning-sapphire-950: #071c2d;
}SCSS
$stunning-sapphire: #185887;
$stunning-sapphire-rgb: 24, 88, 135;
$stunning-sapphire-light: mix(#fff, $stunning-sapphire, 20%);
$stunning-sapphire-dark: mix(#000, $stunning-sapphire, 20%);
.element {
color: $stunning-sapphire;
box-shadow: 0 0 0 2px rgba($stunning-sapphire, 0.35);
}