Cor nomeada · #ABC8D8
Sonata
Sonata é #ABC8D8: rgb(171 200 216), hsl(201 37% 76%), oklch(0.816 0.039 232). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Sonata color name →
#ABC8D8
oklch(0.816 0.039 232)
Conversões de cor
- HEX
- #abc8d8
- RGB
- rgb(171 200 216)
- HSL
- hsl(201 37% 76%)
- HWB
- hwb(201 67% 15%)
- OKLCH
- oklch(0.816 0.039 232)
- OKLab
- oklab(0.816 -0.024 -0.03)
- CIE Lab
- lab(78.83 -7.51 -11.44)
- LCH
- lch(78.83 13.68 236.7)
- CMYK
- cmyk(21% 7% 0% 15%)
Tons claros · Sombras · Tons
Tons claros
- B3CDDC
- BCD3E0
- C4D8E4
- CCDEE8
- D5E3EC
- DDE9EF
- E6EEF3
- EEF4F7
- F6F9FB
Sombras
- 94AEBC
- 7E94A0
- 687B85
- 54636B
- 404C53
- 2D363B
- 1B2125
- 0B0F11
- 010202
Tons
- A7C1CF
- A2B9C6
- 9EB2BD
- 9AABB4
- 96A3AB
- 919CA2
- 8D959A
- 898E91
- 848788
Harmonias de cor
Complementar +180°
- ABC8D8
Sonata
- D8BDAD
≈ Linen Cloth
Análoga -30° +30°
- ABC8D8
Sonata
- A7CBCE
≈ Sky Chase
- B6C4DD
≈ Purpletini
Tríade +120° +240°
- ABC8D8
Sonata
- D8B9C5
≈ Lavender Blessing
- C3C6AA
≈ Balance Green
Complementar dividida +150° +210°
- ABC8D8
Sonata
- DBBAB8
≈ Rose Hip Tonic
- D0C1A7
≈ Baja
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.75:1 · APCA Lc 32
Ag
AAASobre preto
WCAG 11.98:1 · APCA Lc 71
Melhor cor de texto: #000000
WCAG 11.98:1 (AAA) · APCA Lc 71
Contrast pairs
Trechos de código
CSS
:root {
--sonata: #abc8d8;
--sonata-rgb: 171 200 216;
--sonata-oklch: oklch(0.816 0.039 232);
}
.element {
color: var(--sonata);
background-color: hsl(201 37% 76%);
border-color: oklch(0.816 0.039 232);
}Tailwind CSS v4
@theme {
--color-sonata: #abc8d8;
--color-sonata-50: #ebf7ff;
--color-sonata-100: #dceaf3;
--color-sonata-200: #c5d7e2;
--color-sonata-300: #a5bbc8;
--color-sonata-400: #88a3b2;
--color-sonata-500: #6d8b9c;
--color-sonata-600: #5c7684;
--color-sonata-700: #4a5e69;
--color-sonata-800: #35454d;
--color-sonata-900: #243036;
--color-sonata-950: #131c21;
}SCSS
$sonata: #abc8d8;
$sonata-rgb: 171, 200, 216;
$sonata-light: mix(#fff, $sonata, 20%);
$sonata-dark: mix(#000, $sonata, 20%);
.element {
color: $sonata;
box-shadow: 0 0 0 2px rgba($sonata, 0.35);
}