Cor nomeada · #3A5779
Star Spangled
Star Spangled é #3A5779: rgb(58 87 121), hsl(212 35% 35%), oklch(0.449 0.066 253.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Star Spangled color name →
#3A5779
oklch(0.449 0.066 253.1)
Conversões de cor
- HEX
- #3a5779
- RGB
- rgb(58 87 121)
- HSL
- hsl(212 35% 35%)
- HWB
- hwb(212 23% 53%)
- OKLCH
- oklch(0.449 0.066 253.1)
- OKLab
- oklab(0.449 -0.019 -0.063)
- CIE Lab
- lab(35.85 -3.18 -22.97)
- LCH
- lch(35.85 23.19 262.1)
- CMYK
- cmyk(52% 28% 0% 53%)
Tons claros · Sombras · Tons
Tons claros
- 4C6786
- 5E7693
- 7187A0
- 8497AD
- 98A8BB
- ACB9C8
- C0CAD6
- D5DBE3
- EAEDF1
Sombras
- 314B68
- 283E58
- 203348
- 182739
- 101C2B
- 09121D
- 040810
- 010305
- 000001
Tons
- 415B7A
- 485F7B
- 4F637C
- 56687D
- 5D6C7D
- 64707E
- 6B747F
- 72787F
- 797C80
Harmonias de cor
Complementar +180°
- 3A5779
Star Spangled
- 6B4F29
≈ Wagon Train
Análoga -30° +30°
- 3A5779
Star Spangled
- 245D70
≈ Deep Blue Sea
- 505079
≈ Provocative
Tríade +120° +240°
- 3A5779
Star Spangled
- 75454A
≈ Musk Memory
- 465D36
≈ Stinging Nettle
Complementar dividida +150° +210°
- 3A5779
Star Spangled
- 744937
≈ Riding Boots
- 5C5728
≈ Reptile Revenge
Tétrade +90° +180° +270°
- 3A5779
Star Spangled
- 6F465F
≈ Wizard Time
- 6B4F29
≈ Wagon Train
- 2E614A
≈ Evening Sea
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 7.44:1 · APCA Lc 86
Ag
FailSobre preto
WCAG 2.81:1 · APCA Lc 16
Melhor cor de texto: #FFFFFF
WCAG 7.44:1 (AAA) · APCA Lc 86
Contrast pairs
Trechos de código
CSS
:root {
--star-spangled: #3a5779;
--star-spangled-rgb: 58 87 121;
--star-spangled-oklch: oklch(0.449 0.066 253.1);
}
.element {
color: var(--star-spangled);
background-color: hsl(212 35% 35%);
border-color: oklch(0.449 0.066 253.1);
}Tailwind CSS v4
@theme {
--color-star-spangled: #3a5779;
--color-star-spangled-50: #e9f7ff;
--color-star-spangled-100: #dae9fe;
--color-star-spangled-200: #c2d6f1;
--color-star-spangled-300: #a1bad9;
--color-star-spangled-400: #83a1c5;
--color-star-spangled-500: #6789b1;
--color-star-spangled-600: #577496;
--color-star-spangled-700: #465d78;
--color-star-spangled-800: #314459;
--color-star-spangled-900: #212f3e;
--color-star-spangled-950: #111b27;
}SCSS
$star-spangled: #3a5779;
$star-spangled-rgb: 58, 87, 121;
$star-spangled-light: mix(#fff, $star-spangled, 20%);
$star-spangled-dark: mix(#000, $star-spangled, 20%);
.element {
color: $star-spangled;
box-shadow: 0 0 0 2px rgba($star-spangled, 0.35);
}