Benannte Farbe · #4E9AB0
Starflower Blue
Starflower Blue ist #4E9AB0: rgb(78 154 176), hsl(193 39% 50%), oklch(0.646 0.082 219.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Cyan mean? → · Starflower Blue color name →
#4E9AB0
oklch(0.646 0.082 219.2)
Farbumrechnungen
- HEX
- #4e9ab0
- RGB
- rgb(78 154 176)
- HSL
- hsl(193 39% 50%)
- HWB
- hwb(193 31% 31%)
- OKLCH
- oklch(0.646 0.082 219.2)
- OKLab
- oklab(0.646 -0.063 -0.052)
- CIE Lab
- lab(59.43 -19.69 -19.14)
- LCH
- lch(59.43 27.46 224.2)
- CMYK
- cmyk(56% 13% 0% 31%)
Tints · Shades · Tones
Tints
- 62A4B8
- 74AEC0
- 86B8C8
- 97C2CF
- A9CCD7
- BAD6DF
- CBE0E7
- DCEAEF
- EEF5F7
Shades
- 438599
- 387182
- 2D5E6C
- 234B56
- 193942
- 0F272E
- 07171C
- 02090B
- 000101
Tones
- 5598AB
- 5C95A6
- 6193A2
- 67909D
- 6C8D98
- 708B93
- 75888E
- 79858A
- 7C8385
Farbharmonien
Komplementär +180°
- 4E9AB0
Starflower Blue
- B97D69
≈ Faneuil Brick
Analog -30° +30°
- 4E9AB0
Starflower Blue
- 4B9E98
≈ Tourmaline Turquoise
- 6692BE
≈ Blue Marble
Triadisch +120° +240°
- 4E9AB0
Starflower Blue
- B07B9E
≈ Antique Hot Pink
- 9A8F53
≈ Dijonnaise
Geteilt komplementär +150° +210°
- 4E9AB0
Starflower Blue
- BA7983
≈ Mauve Seductress
- AF8556
≈ Cool Copper
Tetradisch +90° +180° +270°
- 4E9AB0
Starflower Blue
- 9D80B4
≈ Lush Lilac
- B97D69
≈ Faneuil Brick
- 7E9862
≈ Pea Aubergine
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.19:1 · APCA Lc 59
Ag
AAAuf Schwarz
WCAG 6.57:1 · APCA Lc 43
Beste Textfarbe: #000000
WCAG 6.57:1 (AA) · APCA Lc 43
Contrast pairs
Code-Snippets
CSS
:root {
--starflower-blue: #4e9ab0;
--starflower-blue-rgb: 78 154 176;
--starflower-blue-oklch: oklch(0.646 0.082 219.2);
}
.element {
color: var(--starflower-blue);
background-color: hsl(193 39% 50%);
border-color: oklch(0.646 0.082 219.2);
}Tailwind CSS v4
@theme {
--color-starflower-blue: #4e9ab0;
--color-starflower-blue-50: #ddfbff;
--color-starflower-blue-100: #cbeffb;
--color-starflower-blue-200: #aedded;
--color-starflower-blue-300: #88c2d5;
--color-starflower-blue-400: #63aabf;
--color-starflower-blue-500: #3b93ab;
--color-starflower-blue-600: #347c90;
--color-starflower-blue-700: #296374;
--color-starflower-blue-800: #1b4955;
--color-starflower-blue-900: #12333b;
--color-starflower-blue-950: #041e25;
}SCSS
$starflower-blue: #4e9ab0;
$starflower-blue-rgb: 78, 154, 176;
$starflower-blue-light: mix(#fff, $starflower-blue, 20%);
$starflower-blue-dark: mix(#000, $starflower-blue, 20%);
.element {
color: $starflower-blue;
box-shadow: 0 0 0 2px rgba($starflower-blue, 0.35);
}