Cor nomeada mais próxima · #676DA2
#676DA2
Cor nomeada mais próxima: Twinkle Night
#676DA2 (rgb(103 109 162), hsl(234 24% 52%), oklch(0.552 0.083 278.4)) é 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.
#676DA2
oklch(0.552 0.083 278.4)
Conversões de cor
- HEX
- #676da2
- RGB
- rgb(103 109 162)
- HSL
- hsl(234 24% 52%)
- HWB
- hwb(234 40% 36%)
- OKLCH
- oklch(0.552 0.083 278.4)
- OKLab
- oklab(0.552 0.012 -0.082)
- CIE Lab
- lab(47.2 7.81 -29.66)
- LCH
- lch(47.2 30.67 284.8)
- CMYK
- cmyk(36% 33% 0% 36%)
Tons claros · Sombras · Tons
Tons claros
- 757BAB
- 8389B5
- 9297BE
- A0A6C8
- B0B4D1
- BFC3DA
- CFD2E3
- DFE1ED
- EFF0F6
Sombras
- 595E8C
- 4B4F77
- 3D4163
- 30334F
- 23263C
- 17192A
- 0C0D19
- 04040A
- 000101
Tons
- 696F9F
- 6C719C
- 6E7398
- 717595
- 737792
- 76798E
- 787B8B
- 7B7D87
- 7D7E84
Harmonias de cor
Complementar +180°
- 676DA2
Twinkle Night
- 7F7336
≈ Trellis Climber
Análoga -30° +30°
- 676DA2
Twinkle Night
- 4A76A0
≈ Dull Blue
- 806597
≈ Clematis
Tríade +120° +240°
- 676DA2
Twinkle Night
- 9C614E
≈ Tuscan Rooftops
- 448160
≈ Leisure Green
Complementar dividida +150° +210°
- 676DA2
Twinkle Night
- 92693A
≈ Relic Bronze
- 647B46
≈ Noble Eric
Tétrade +90° +180° +270°
- 676DA2
Twinkle Night
- 9B5D68
≈ Tropical Hibiscus
- 7F7336
≈ Trellis Climber
- 29827B
≈ Apatite Blue
Contraste e acessibilidade
Ag
AASobre branco
WCAG 4.89:1 · APCA Lc 74
Ag
FailSobre preto
WCAG 4.28:1 · APCA Lc 28
Melhor cor de texto: #FFFFFF
WCAG 4.89:1 (AA) · APCA Lc 74
Contrast pairs
Trechos de código
CSS
:root {
--twinkle-night: #676da2;
--twinkle-night-rgb: 103 109 162;
--twinkle-night-oklch: oklch(0.552 0.083 278.4);
}
.element {
color: var(--twinkle-night);
background-color: hsl(234 24% 52%);
border-color: oklch(0.552 0.083 278.4);
}Tailwind CSS v4
@theme {
--color-twinkle-night: #676da2;
--color-twinkle-night-50: #f0f3ff;
--color-twinkle-night-100: #e2e5ff;
--color-twinkle-night-200: #cdd1f8;
--color-twinkle-night-300: #afb3e2;
--color-twinkle-night-400: #939acf;
--color-twinkle-night-500: #7a80bc;
--color-twinkle-night-600: #676d9f;
--color-twinkle-night-700: #525780;
--color-twinkle-night-800: #3b405f;
--color-twinkle-night-900: #282c43;
--color-twinkle-night-950: #16192b;
}SCSS
$twinkle-night: #676da2;
$twinkle-night-rgb: 103, 109, 162;
$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);
}