Colore con nome · #586E84
Blueberry Dream
Blueberry Dream è #586E84: rgb(88 110 132), hsl(210 20% 43%), oklch(0.529 0.044 248.7). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Blueberry Dream color name →
#586E84
oklch(0.529 0.044 248.7)
Conversioni di colore
- 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%)
Tinte · Ombre · Toni
Tinte
- 677C90
- 77899C
- 8797A8
- 98A6B4
- A8B4C0
- B9C3CC
- CAD1D9
- DCE0E6
- EDF0F2
Ombre
- 4B5F72
- 3F5060
- 33414F
- 28333F
- 1D262F
- 121920
- 090E12
- 030406
- 000101
Toni
- 5C7084
- 607283
- 647483
- 687583
- 6C7782
- 707982
- 747B81
- 787C81
- 7C7E81
Armonie di colore
Complementare +180°
- 586E84
Blueberry Dream
- 7C6750
≈ Otter
Analogo -30° +30°
- 586E84
Blueberry Dream
- 4E727D
≈ Tornado Season
- 656985
≈ Luscious Lavender
Triadico +120° +240°
- 586E84
Blueberry Dream
- 826166
≈ Celine
- 647156
≈ Midnight Garden
Complementare divisa +150° +210°
- 586E84
Blueberry Dream
- 826359
≈ Smoked Almond
- 726C4F
≈ Olive Grove
Tetradico +90° +180° +270°
- 586E84
Blueberry Dream
- 7D6274
≈ Majestic Plum
- 7C6750
≈ Otter
- 567362
≈ Painted Turtle
Contrasto e accessibilità
Ag
AASu bianco
WCAG 5.27:1 · APCA Lc 76
Ag
FailSu nero
WCAG 3.97:1 · APCA Lc 26
Miglior colore del testo: #FFFFFF
WCAG 5.27:1 (AA) · APCA Lc 76
Contrast pairs
Frammenti di codice
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);
}