Cor nomeada · #4D5B8A
Gem
Gem é #4D5B8A: rgb(77 91 138), hsl(226 28% 42%), oklch(0.48 0.078 270.6). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Gem color name →
#4D5B8A
oklch(0.48 0.078 270.6)
Conversões de cor
- HEX
- #4d5b8a
- RGB
- rgb(77 91 138)
- HSL
- hsl(226 28% 42%)
- HWB
- hwb(226 30% 46%)
- OKLCH
- oklch(0.48 0.078 270.6)
- OKLab
- oklab(0.48 0.001 -0.078)
- CIE Lab
- lab(39.06 4.46 -28.24)
- LCH
- lch(39.06 28.59 279)
- CMYK
- cmyk(44% 34% 0% 46%)
Tons claros · Sombras · Tons
Tons claros
- 5D6A96
- 6D7AA1
- 7E8AAD
- 909AB9
- A1AAC4
- B3BBD0
- C6CBDC
- D9DCE7
- ECEEF3
Sombras
- 424E77
- 374165
- 2C3553
- 222942
- 181E32
- 0F1322
- 070914
- 020307
- 000001
Tons
- 525F89
- 576389
- 5C6688
- 616A87
- 666E86
- 6B7285
- 707584
- 757983
- 7B7C81
Harmonias de cor
Complementar +180°
- 4D5B8A
Gem
- 6E5C24
≈ Bean Green
Análoga -30° +30°
Tríade +120° +240°
Complementar dividida +150° +210°
Tétrade +90° +180° +270°
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.60:1 · APCA Lc 83
Ag
FailSobre preto
WCAG 3.17:1 · APCA Lc 19
Melhor cor de texto: #FFFFFF
WCAG 6.60:1 (AA) · APCA Lc 83
Contrast pairs
Trechos de código
CSS
:root {
--gem: #4d5b8a;
--gem-rgb: 77 91 138;
--gem-oklch: oklch(0.48 0.078 270.6);
}
.element {
color: var(--gem);
background-color: hsl(226 28% 42%);
border-color: oklch(0.48 0.078 270.6);
}Tailwind CSS v4
@theme {
--color-gem: #4d5b8a;
--color-gem-50: #edf4ff;
--color-gem-100: #dfe7ff;
--color-gem-200: #c9d3f7;
--color-gem-300: #aab5e0;
--color-gem-400: #8d9ccd;
--color-gem-500: #7283ba;
--color-gem-600: #616f9d;
--color-gem-700: #4d597e;
--color-gem-800: #37415e;
--color-gem-900: #262d42;
--color-gem-950: #141a2a;
}SCSS
$gem: #4d5b8a;
$gem-rgb: 77, 91, 138;
$gem-light: mix(#fff, $gem, 20%);
$gem-dark: mix(#000, $gem, 20%);
.element {
color: $gem;
box-shadow: 0 0 0 2px rgba($gem, 0.35);
}