Benannte Farbe · #5B82A6
Sapphired
Sapphired ist #5B82A6: rgb(91 130 166), hsl(209 30% 50%), oklch(0.592 0.071 247.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Sapphired color name →
#5B82A6
oklch(0.592 0.071 247.1)
Farbumrechnungen
- HEX
- #5b82a6
- RGB
- rgb(91 130 166)
- HSL
- hsl(209 30% 50%)
- HWB
- hwb(209 36% 35%)
- OKLCH
- oklch(0.592 0.071 247.1)
- OKLab
- oklab(0.592 -0.027 -0.065)
- CIE Lab
- lab(52.56 -6.52 -23.82)
- LCH
- lch(52.56 24.7 254.7)
- CMYK
- cmyk(45% 22% 0% 35%)
Tints · Shades · Tones
Tints
- 6B8EAF
- 7B9AB8
- 8BA6C1
- 9BB3CA
- ABBFD2
- BBCCDB
- CCD8E4
- DDE5ED
- EEF2F6
Shades
- 4E7090
- 415F7A
- 354E65
- 293E51
- 1E2F3E
- 13202B
- 09121A
- 03060A
- 000101
Tones
- 5F82A2
- 63829F
- 67829B
- 6B8297
- 6F8193
- 728190
- 76818C
- 798188
- 7D8084
Farbharmonien
Komplementär +180°
- 5B82A6
Sapphired
- 9A764F
≈ Summerville Brown
Analog -30° +30°
- 5B82A6
Sapphired
- 488899
≈ Hippie Blue
- 737AA8
≈ Minuet Lilac
Triadisch +120° +240°
- 5B82A6
Sapphired
- A36C76
≈ Turkish Rose
- 728658
≈ Mixedwood Leaf
Geteilt komplementär +150° +210°
- 5B82A6
Sapphired
- A36F60
≈ Honey Maple
- 897E4C
≈ Green Moss
Tetradisch +90° +180° +270°
- 5B82A6
Sapphired
- 996E8D
≈ Pink Jazz
- 9A764F
≈ Summerville Brown
- 598B6D
≈ Murdoch
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 4.04:1 · APCA Lc 68
Ag
AAAuf Schwarz
WCAG 5.18:1 · APCA Lc 34
Beste Textfarbe: #000000
WCAG 5.18:1 (AA) · APCA Lc 34
Contrast pairs
Code-Snippets
CSS
:root {
--sapphired: #5b82a6;
--sapphired-rgb: 91 130 166;
--sapphired-oklch: oklch(0.592 0.071 247.1);
}
.element {
color: var(--sapphired);
background-color: hsl(209 30% 50%);
border-color: oklch(0.592 0.071 247.1);
}Tailwind CSS v4
@theme {
--color-sapphired: #5b82a6;
--color-sapphired-50: #e6f7ff;
--color-sapphired-100: #d6eaff;
--color-sapphired-200: #bed7f2;
--color-sapphired-300: #9cbbdb;
--color-sapphired-400: #7da3c6;
--color-sapphired-500: #5f8bb3;
--color-sapphired-600: #517597;
--color-sapphired-700: #405e79;
--color-sapphired-800: #2d4559;
--color-sapphired-900: #1e303e;
--color-sapphired-950: #0e1c28;
}SCSS
$sapphired: #5b82a6;
$sapphired-rgb: 91, 130, 166;
$sapphired-light: mix(#fff, $sapphired, 20%);
$sapphired-dark: mix(#000, $sapphired, 20%);
.element {
color: $sapphired;
box-shadow: 0 0 0 2px rgba($sapphired, 0.35);
}