Couleur nommée · #A3BBCD
Heavenly Blue
Heavenly Blue correspond à #A3BBCD : rgb(163 187 205), hsl(206 30% 72%), oklch(0.78 0.037 240.4). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Blue mean? → · Heavenly Blue color name →
#A3BBCD
oklch(0.78 0.037 240.4)
Conversions de couleur
- HEX
- #a3bbcd
- RGB
- rgb(163 187 205)
- HSL
- hsl(206 30% 72%)
- HWB
- hwb(206 64% 20%)
- OKLCH
- oklch(0.78 0.037 240.4)
- OKLab
- oklab(0.78 -0.018 -0.032)
- CIE Lab
- lab(74.49 -5.57 -12.01)
- LCH
- lch(74.49 13.24 245.1)
- CMYK
- cmyk(20% 9% 0% 20%)
Teintes · Ombres · Tons
Teintes
- ACC2D2
- B5C8D7
- BECFDC
- C7D6E1
- D0DDE6
- DAE3EB
- E3EAF0
- ECF1F5
- F6F8FA
Ombres
- 8DA2B2
- 788A98
- 63737E
- 4F5C66
- 3C464E
- 2A3238
- 191F23
- 0A0D0F
- 010202
Tons
- A0B5C5
- 9CAFBD
- 99A9B5
- 95A3AE
- 929DA6
- 8E979E
- 8B9197
- 878C8F
- 848687
Harmonies de couleurs
Complémentaire +180°
- A3BBCD
Heavenly Blue
- CAB2A0
≈ Familiar Beige
Analogue -30° +30°
- A3BBCD
Heavenly Blue
- 9DBEC5
≈ Rest Assured
- AEB7D0
≈ Hundred Waters
Triadique +120° +240°
- A3BBCD
Heavenly Blue
- CCAEB6
≈ Scented Frill
- B4BBA1
≈ Dried Chervil
Complémentaire divisée +150° +210°
- A3BBCD
Heavenly Blue
- CEAFA9
≈ Garden Snail
- C0B79D
≈ Wagon Wheel
Tétradique +90° +180° +270°
- A3BBCD
Heavenly Blue
- C6AFC3
≈ Lavish Lavender
- CAB2A0
≈ Familiar Beige
- A7BEAB
≈ Young Gecko
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.99:1 · APCA Lc 39
Ag
AAASur noir
WCAG 10.54:1 · APCA Lc 64
Meilleure couleur de texte: #000000
WCAG 10.54:1 (AAA) · APCA Lc 64
Contrast pairs
Extraits de code
CSS
:root {
--heavenly-blue: #a3bbcd;
--heavenly-blue-rgb: 163 187 205;
--heavenly-blue-oklch: oklch(0.78 0.037 240.4);
}
.element {
color: var(--heavenly-blue);
background-color: hsl(206 30% 72%);
border-color: oklch(0.78 0.037 240.4);
}Tailwind CSS v4
@theme {
--color-heavenly-blue: #a3bbcd;
--color-heavenly-blue-50: #ecf7ff;
--color-heavenly-blue-100: #deeaf3;
--color-heavenly-blue-200: #c7d7e3;
--color-heavenly-blue-300: #a8bac9;
--color-heavenly-blue-400: #8ca2b2;
--color-heavenly-blue-500: #718a9d;
--color-heavenly-blue-600: #607584;
--color-heavenly-blue-700: #4c5d6a;
--color-heavenly-blue-800: #37444e;
--color-heavenly-blue-900: #252f36;
--color-heavenly-blue-950: #141c21;
}SCSS
$heavenly-blue: #a3bbcd;
$heavenly-blue-rgb: 163, 187, 205;
$heavenly-blue-light: mix(#fff, $heavenly-blue, 20%);
$heavenly-blue-dark: mix(#000, $heavenly-blue, 20%);
.element {
color: $heavenly-blue;
box-shadow: 0 0 0 2px rgba($heavenly-blue, 0.35);
}