Colore con nome · #5577AA
Flax Flower
Flax Flower è #5577AA: rgb(85 119 170), hsl(216 33% 50%), oklch(0.565 0.089 258.3). Scopri tinte, ombre, armonie, contrasto WCAG e APCA e codice CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Flax Flower color name →
#5577AA
oklch(0.565 0.089 258.3)
Conversioni di colore
- HEX
- #5577aa
- RGB
- rgb(85 119 170)
- HSL
- hsl(216 33% 50%)
- HWB
- hwb(216 33% 33%)
- OKLCH
- oklch(0.565 0.089 258.3)
- OKLab
- oklab(0.565 -0.018 -0.087)
- CIE Lab
- lab(49.11 -1.29 -31.47)
- LCH
- lch(49.11 31.5 267.7)
- CMYK
- cmyk(50% 30% 0% 33%)
Tinte · Ombre · Toni
Tinte
- 6584B3
- 7591BB
- 869FC4
- 96ACCD
- A7BAD5
- B8C7DE
- CAD5E6
- DBE3EE
- EDF1F7
Ombre
- 496793
- 3D577D
- 314768
- 263853
- 1C2A3F
- 111C2D
- 08101B
- 02050B
- 000101
Toni
- 5A78A6
- 5E79A2
- 627A9E
- 677B9A
- 6B7C96
- 6F7D92
- 747E8D
- 787F89
- 7C7F85
Armonie di colore
Complementare +180°
- 5577AA
Flax Flower
- 926F34
≈ Dirt Yellow
Analogo -30° +30°
- 5577AA
Flax Flower
- 33809F
≈ Greenland Blue
- 746DA7
≈ Wintertime Mauve
Triadico +120° +240°
- 5577AA
Flax Flower
- A46062
≈ Herald of Spring
- 5B834F
≈ Glade Green
Complementare divisa +150° +210°
- 5577AA
Flax Flower
- A06546
≈ Antique Copper
- 7B7A38
≈ Evening Green
Tetradico +90° +180° +270°
- 5577AA
Flax Flower
- 9D607F
≈ Beryl Red
- 926F34
≈ Dirt Yellow
- 37876C
≈ Mythical Forest
Contrasto e accessibilità
Ag
AASu bianco
WCAG 4.55:1 · APCA Lc 72
Ag
AASu nero
WCAG 4.60:1 · APCA Lc 30
Miglior colore del testo: #000000
WCAG 4.60:1 (AA) · APCA Lc 30
Contrast pairs
Frammenti di codice
CSS
:root {
--flax-flower: #5577aa;
--flax-flower-rgb: 85 119 170;
--flax-flower-oklch: oklch(0.565 0.089 258.3);
}
.element {
color: var(--flax-flower);
background-color: hsl(216 33% 50%);
border-color: oklch(0.565 0.089 258.3);
}Tailwind CSS v4
@theme {
--color-flax-flower: #5577aa;
--color-flax-flower-50: #e7f6ff;
--color-flax-flower-100: #d7e9ff;
--color-flax-flower-200: #bfd6fb;
--color-flax-flower-300: #9db9e5;
--color-flax-flower-400: #7ea0d3;
--color-flax-flower-500: #6187c1;
--color-flax-flower-600: #5273a3;
--color-flax-flower-700: #425c83;
--color-flax-flower-800: #2e4361;
--color-flax-flower-900: #1f2f44;
--color-flax-flower-950: #0f1b2c;
}SCSS
$flax-flower: #5577aa;
$flax-flower-rgb: 85, 119, 170;
$flax-flower-light: mix(#fff, $flax-flower, 20%);
$flax-flower-dark: mix(#000, $flax-flower, 20%);
.element {
color: $flax-flower;
box-shadow: 0 0 0 2px rgba($flax-flower, 0.35);
}