Benannte Farbe · #0F52BA
Sapphire
Sapphire ist #0F52BA: rgb(15 82 186), hsl(216 85% 39%), oklch(0.467 0.176 260). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Sapphire color name →
#0F52BA
oklch(0.467 0.176 260)
Farbumrechnungen
- HEX
- #0f52ba
- RGB
- rgb(15 82 186)
- HSL
- hsl(216 85% 39%)
- HWB
- hwb(216 6% 27%)
- OKLCH
- oklch(0.467 0.176 260)
- OKLab
- oklab(0.467 -0.031 -0.174)
- CIE Lab
- lab(36.24 13.48 -61.47)
- LCH
- lch(36.24 62.93 282.4)
- CMYK
- cmyk(92% 56% 0% 27%)
Tints · Shades · Tones
Tints
- 2C65C2
- 4476CA
- 5B88D2
- 7199D9
- 88AAE1
- 9FBBE7
- B7CCEE
- CFDDF4
- E7EEFA
Shades
- 0B46A1
- 083B89
- 052F72
- 03255C
- 021A46
- 011132
- 00081E
- 00020D
- 000002
Tones
- 2058B5
- 2D5EB0
- 3963AB
- 4468A5
- 4E6DA0
- 58719A
- 627594
- 6C798E
- 767D87
Farbharmonien
Komplementär +180°
- 0F52BA
Sapphire
- 765300
≈ Pickled Grape Leaves
Analog -30° +30°
- 0F52BA
Sapphire
- 006384
≈ Blue Heist
- 5D3EB3
≈ Swiss Plum
Triadisch +120° +240°
- 0F52BA
Sapphire
- A6142D
≈ Hong Kong Taxi
- 1D6C00
≈ Leafy Lush
Geteilt komplementär +150° +210°
- 0F52BA
Sapphire
- 8E4000
≈ Korichnewyi Brown
- 5E5E00
≈ Kirchner Green
Tetradisch +90° +180° +270°
Kontrast & Barrierefreiheit
Ag
AAAAuf Weiß
WCAG 7.15:1 · APCA Lc 84
Ag
FailAuf Schwarz
WCAG 2.93:1 · APCA Lc 18
Beste Textfarbe: #FFFFFF
WCAG 7.15:1 (AAA) · APCA Lc 84
Contrast pairs
Code-Snippets
CSS
:root {
--sapphire: #0f52ba;
--sapphire-rgb: 15 82 186;
--sapphire-oklch: oklch(0.467 0.176 260);
}
.element {
color: var(--sapphire);
background-color: hsl(216 85% 39%);
border-color: oklch(0.467 0.176 260);
}Tailwind CSS v4
@theme {
--color-sapphire: #0f52ba;
--color-sapphire-50: #daf6ff;
--color-sapphire-100: #c8e9ff;
--color-sapphire-200: #abd5ff;
--color-sapphire-300: #85b6ff;
--color-sapphire-400: #5d9cff;
--color-sapphire-500: #3880f8;
--color-sapphire-600: #306dd1;
--color-sapphire-700: #2657a8;
--color-sapphire-800: #15407e;
--color-sapphire-900: #0d2c59;
--color-sapphire-950: #02193c;
}SCSS
$sapphire: #0f52ba;
$sapphire-rgb: 15, 82, 186;
$sapphire-light: mix(#fff, $sapphire, 20%);
$sapphire-dark: mix(#000, $sapphire, 20%);
.element {
color: $sapphire;
box-shadow: 0 0 0 2px rgba($sapphire, 0.35);
}