Benannte Farbe · #5488C0
Blueberry Popover
Blueberry Popover ist #5488C0: rgb(84 136 192), hsl(211 46% 54%), oklch(0.614 0.102 251.4). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Blue mean? → · Blueberry Popover color name →
#5488C0
oklch(0.614 0.102 251.4)
Farbumrechnungen
- HEX
- #5488c0
- RGB
- rgb(84 136 192)
- HSL
- hsl(211 46% 54%)
- HWB
- hwb(211 33% 25%)
- OKLCH
- oklch(0.614 0.102 251.4)
- OKLab
- oklab(0.614 -0.033 -0.097)
- CIE Lab
- lab(54.88 -5.24 -35.1)
- LCH
- lch(54.88 35.49 261.5)
- CMYK
- cmyk(56% 29% 0% 25%)
Tints · Shades · Tones
Tints
- 6594C7
- 76A0CD
- 87ABD4
- 98B7DA
- A8C3E1
- BACFE7
- CBDBED
- DCE7F3
- EDF3F9
Shades
- 4875A7
- 3C638E
- 315276
- 26415F
- 1B3149
- 112234
- 081320
- 02060E
- 000102
Tones
- 5988BA
- 5E87B3
- 6386AD
- 6886A7
- 6C85A1
- 70849A
- 748394
- 78828D
- 7C8187
Farbharmonien
Komplementär +180°
- 5488C0
Blueberry Popover
- AB7938
≈ Buff Leather
Analog -30° +30°
- 5488C0
Blueberry Popover
- 2792B0
≈ Munsell Blue
- 7A7DC0
≈ Astro Zinger
Triadisch +120° +240°
- 5488C0
Blueberry Popover
- B96975
≈ Dusky Rose
- 6E914E
≈ Forest Bound
Geteilt komplementär +150° +210°
- 5488C0
Blueberry Popover
- B86F53
≈ Iced Tea
- 918635
≈ Eden Prairie
Tetradisch +90° +180° +270°
- 5488C0
Blueberry Popover
- AE6B96
≈ Violetta
- AB7938
≈ Buff Leather
- 429771
≈ Ocean Green
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.71:1 · APCA Lc 65
Ag
AAAuf Schwarz
WCAG 5.65:1 · APCA Lc 37
Beste Textfarbe: #000000
WCAG 5.65:1 (AA) · APCA Lc 37
Contrast pairs
Code-Snippets
CSS
:root {
--blueberry-popover: #5488c0;
--blueberry-popover-rgb: 84 136 192;
--blueberry-popover-oklch: oklch(0.614 0.102 251.4);
}
.element {
color: var(--blueberry-popover);
background-color: hsl(211 46% 54%);
border-color: oklch(0.614 0.102 251.4);
}Tailwind CSS v4
@theme {
--color-blueberry-popover: #5488c0;
--color-blueberry-popover-50: #e1f8ff;
--color-blueberry-popover-100: #d1ebff;
--color-blueberry-popover-200: #b6d7ff;
--color-blueberry-popover-300: #93bbeb;
--color-blueberry-popover-400: #70a2d9;
--color-blueberry-popover-500: #508ac8;
--color-blueberry-popover-600: #4475a8;
--color-blueberry-popover-700: #365d87;
--color-blueberry-popover-800: #244564;
--color-blueberry-popover-900: #183046;
--color-blueberry-popover-950: #091c2e;
}SCSS
$blueberry-popover: #5488c0;
$blueberry-popover-rgb: 84, 136, 192;
$blueberry-popover-light: mix(#fff, $blueberry-popover, 20%);
$blueberry-popover-dark: mix(#000, $blueberry-popover, 20%);
.element {
color: $blueberry-popover;
box-shadow: 0 0 0 2px rgba($blueberry-popover, 0.35);
}