Benannte Farbe · #586E84
Blueberry Dream
Blueberry Dream ist #586E84: rgb(88 110 132), hsl(210 20% 43%), oklch(0.529 0.044 248.7). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Blueberry Dream color name →
#586E84
oklch(0.529 0.044 248.7)
Farbumrechnungen
- HEX
- #586e84
- RGB
- rgb(88 110 132)
- HSL
- hsl(210 20% 43%)
- HWB
- hwb(210 35% 48%)
- OKLCH
- oklch(0.529 0.044 248.7)
- OKLab
- oklab(0.529 -0.016 -0.041)
- CIE Lab
- lab(45.29 -4.15 -15.01)
- LCH
- lch(45.29 15.57 254.6)
- CMYK
- cmyk(33% 17% 0% 48%)
Tints · Shades · Tones
Tints
- 677C90
- 77899C
- 8797A8
- 98A6B4
- A8B4C0
- B9C3CC
- CAD1D9
- DCE0E6
- EDF0F2
Shades
- 4B5F72
- 3F5060
- 33414F
- 28333F
- 1D262F
- 121920
- 090E12
- 030406
- 000101
Tones
- 5C7084
- 607283
- 647483
- 687583
- 6C7782
- 707982
- 747B81
- 787C81
- 7C7E81
Farbharmonien
Komplementär +180°
- 586E84
Blueberry Dream
- 7C6750
≈ Otter
Analog -30° +30°
- 586E84
Blueberry Dream
- 4E727D
≈ Tornado Season
- 656985
≈ Luscious Lavender
Triadisch +120° +240°
- 586E84
Blueberry Dream
- 826166
≈ Celine
- 647156
≈ Midnight Garden
Geteilt komplementär +150° +210°
- 586E84
Blueberry Dream
- 826359
≈ Smoked Almond
- 726C4F
≈ Olive Grove
Tetradisch +90° +180° +270°
- 586E84
Blueberry Dream
- 7D6274
≈ Majestic Plum
- 7C6750
≈ Otter
- 567362
≈ Painted Turtle
Kontrast & Barrierefreiheit
Ag
AAAuf Weiß
WCAG 5.27:1 · APCA Lc 76
Ag
FailAuf Schwarz
WCAG 3.97:1 · APCA Lc 26
Beste Textfarbe: #FFFFFF
WCAG 5.27:1 (AA) · APCA Lc 76
Contrast pairs
Code-Snippets
CSS
:root {
--blueberry-dream: #586e84;
--blueberry-dream-rgb: 88 110 132;
--blueberry-dream-oklch: oklch(0.529 0.044 248.7);
}
.element {
color: var(--blueberry-dream);
background-color: hsl(210 20% 43%);
border-color: oklch(0.529 0.044 248.7);
}Tailwind CSS v4
@theme {
--color-blueberry-dream: #586e84;
--color-blueberry-dream-50: #ecf6ff;
--color-blueberry-dream-100: #dee9f6;
--color-blueberry-dream-200: #c7d6e7;
--color-blueberry-dream-300: #a7bacd;
--color-blueberry-dream-400: #8ba1b8;
--color-blueberry-dream-500: #7089a2;
--color-blueberry-dream-600: #5f7489;
--color-blueberry-dream-700: #4c5d6e;
--color-blueberry-dream-800: #364451;
--color-blueberry-dream-900: #252f38;
--color-blueberry-dream-950: #141c23;
}SCSS
$blueberry-dream: #586e84;
$blueberry-dream-rgb: 88, 110, 132;
$blueberry-dream-light: mix(#fff, $blueberry-dream, 20%);
$blueberry-dream-dark: mix(#000, $blueberry-dream, 20%);
.element {
color: $blueberry-dream;
box-shadow: 0 0 0 2px rgba($blueberry-dream, 0.35);
}