Cor nomeada mais próxima · #5A6B9C
#5A6B9C
Cor nomeada mais próxima: Twinkle Night
#5A6B9C (rgb(90 107 156), hsl(225 27% 48%), oklch(0.535 0.08 269)) é mais próxima da cor nomeada Twinkle Night. Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
#5A6B9C
oklch(0.535 0.08 269)
Conversões de cor
- HEX
- #5a6b9c
- RGB
- rgb(90 107 156)
- HSL
- hsl(225 27% 48%)
- HWB
- hwb(225 35% 39%)
- OKLCH
- oklch(0.535 0.08 269)
- OKLab
- oklab(0.535 -0.001 -0.08)
- CIE Lab
- lab(45.4 3.51 -29.02)
- LCH
- lch(45.4 29.23 276.9)
- CMYK
- cmyk(42% 31% 0% 39%)
Tons claros · Sombras · Tons
Tons claros
- 6979A6
- 7887B0
- 8896BA
- 98A4C4
- A9B3CE
- B9C2D8
- CAD1E1
- DCE0EB
- EDEFF5
Sombras
- 4D5C87
- 414E73
- 353F5F
- 29324C
- 1E2539
- 131828
- 090D18
- 030409
- 000001
Tons
- 5E6D99
- 617097
- 657294
- 697492
- 6D768F
- 71788C
- 747A89
- 787C86
- 7C7E83
Harmonias de cor
Complementar +180°
- 5A6B9C
Twinkle Night
- 806B32
≈ Time Honoured
Análoga -30° +30°
- 5A6B9C
Twinkle Night
- 3D7397
≈ Phenomenon
- 736395
≈ Pandora
Tríade +120° +240°
- 5A6B9C
Twinkle Night
- 965B52
≈ Copper Mining
- 4B7A53
≈ Rokushō Green
Complementar dividida +150° +210°
- 5A6B9C
Twinkle Night
- 90613C
≈ Moroccan Spice
- 68743C
≈ Cedar Green
Tétrade +90° +180° +270°
- 5A6B9C
Twinkle Night
- 93596C
≈ Grandeur Plum
- 806B32
≈ Time Honoured
- 2D7C6E
≈ Teal We Meet Again
Contraste e acessibilidade
Ag
AASobre branco
WCAG 5.22:1 · APCA Lc 76
Ag
FailSobre preto
WCAG 4.01:1 · APCA Lc 26
Melhor cor de texto: #FFFFFF
WCAG 5.22:1 (AA) · APCA Lc 76
Contrast pairs
Trechos de código
CSS
:root {
--twinkle-night: #5a6b9c;
--twinkle-night-rgb: 90 107 156;
--twinkle-night-oklch: oklch(0.535 0.08 269);
}
.element {
color: var(--twinkle-night);
background-color: hsl(225 27% 48%);
border-color: oklch(0.535 0.08 269);
}Tailwind CSS v4
@theme {
--color-twinkle-night: #5a6b9c;
--color-twinkle-night-50: #ecf5ff;
--color-twinkle-night-100: #dee7ff;
--color-twinkle-night-200: #c7d3f7;
--color-twinkle-night-300: #a8b6e1;
--color-twinkle-night-400: #8b9dcf;
--color-twinkle-night-500: #7084bc;
--color-twinkle-night-600: #5f709f;
--color-twinkle-night-700: #4c597f;
--color-twinkle-night-800: #36425e;
--color-twinkle-night-900: #252d42;
--color-twinkle-night-950: #131a2a;
}SCSS
$twinkle-night: #5a6b9c;
$twinkle-night-rgb: 90, 107, 156;
$twinkle-night-light: mix(#fff, $twinkle-night, 20%);
$twinkle-night-dark: mix(#000, $twinkle-night, 20%);
.element {
color: $twinkle-night;
box-shadow: 0 0 0 2px rgba($twinkle-night, 0.35);
}