Cor nomeada · #17569B
Sonic Blue
Sonic Blue é #17569B: rgb(23 86 155), hsl(211 74% 35%), oklch(0.453 0.128 254.3). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Sonic Blue color name →
#17569B
oklch(0.453 0.128 254.3)
Conversões de cor
- HEX
- #17569b
- RGB
- rgb(23 86 155)
- HSL
- hsl(211 74% 35%)
- HWB
- hwb(211 9% 39%)
- OKLCH
- oklch(0.453 0.128 254.3)
- OKLab
- oklab(0.453 -0.035 -0.123)
- CIE Lab
- lab(35.69 0.99 -43.98)
- LCH
- lch(35.69 43.99 271.3)
- CMYK
- cmyk(85% 45% 0% 39%)
Tons claros · Sombras · Tons
Tons claros
- 3267A6
- 4977B0
- 5F88BB
- 7599C5
- 8BA9CF
- A2BAD9
- B9CBE2
- D0DCEC
- E7EEF6
Sombras
- 124A86
- 0E3E72
- 0A325E
- 06274B
- 041C39
- 021228
- 010818
- 000209
- 000001
Tons
- 265B99
- 326097
- 3D6494
- 476992
- 516D90
- 5B718D
- 64758A
- 6D7987
- 777C84
Harmonias de cor
Complementar +180°
- 17569B
Sonic Blue
- 754D00
≈ Lucky Brown
Análoga -30° +30°
- 17569B
Sonic Blue
- 006079
≈ Blue-Collar
- 50489A
≈ Liberty
Tríade +120° +240°
- 17569B
Sonic Blue
- 8F3040
≈ Tibetan Red
- 356404
≈ Keen Green
Complementar dividida +150° +210°
- 17569B
Sonic Blue
- 8D3805
≈ Espresso Martini
- 5F5800
≈ Ayahuasca Vine
Tétrade +90° +180° +270°
- 17569B
Sonic Blue
- 853367
≈ Boysenberry
- 754D00
≈ Lucky Brown
- 006648
≈ Aotake Bamboo
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 7.39:1 · APCA Lc 85
Ag
FailSobre preto
WCAG 2.84:1 · APCA Lc 17
Melhor cor de texto: #FFFFFF
WCAG 7.39:1 (AAA) · APCA Lc 85
Contrast pairs
Trechos de código
CSS
:root {
--sonic-blue: #17569b;
--sonic-blue-rgb: 23 86 155;
--sonic-blue-oklch: oklch(0.453 0.128 254.3);
}
.element {
color: var(--sonic-blue);
background-color: hsl(211 74% 35%);
border-color: oklch(0.453 0.128 254.3);
}Tailwind CSS v4
@theme {
--color-sonic-blue: #17569b;
--color-sonic-blue-50: #def7ff;
--color-sonic-blue-100: #cdeaff;
--color-sonic-blue-200: #b1d7ff;
--color-sonic-blue-300: #8cbaf9;
--color-sonic-blue-400: #67a1e9;
--color-sonic-blue-500: #4488d9;
--color-sonic-blue-600: #3a73b7;
--color-sonic-blue-700: #2e5c93;
--color-sonic-blue-800: #1d446d;
--color-sonic-blue-900: #132f4d;
--color-sonic-blue-950: #051b33;
}SCSS
$sonic-blue: #17569b;
$sonic-blue-rgb: 23, 86, 155;
$sonic-blue-light: mix(#fff, $sonic-blue, 20%);
$sonic-blue-dark: mix(#000, $sonic-blue, 20%);
.element {
color: $sonic-blue;
box-shadow: 0 0 0 2px rgba($sonic-blue, 0.35);
}