Cor nomeada · #6E5A49
Christmas Ornament
Christmas Ornament é #6E5A49: rgb(110 90 73), hsl(28 20% 36%), oklch(0.483 0.037 62.1). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Brown mean? → · Christmas Ornament color name →
#6E5A49
oklch(0.483 0.037 62.1)
Conversões de cor
- HEX
- #6e5a49
- RGB
- rgb(110 90 73)
- HSL
- hsl(28 20% 36%)
- HWB
- hwb(28 29% 57%)
- OKLCH
- oklch(0.483 0.037 62.1)
- OKLab
- oklab(0.483 0.017 0.033)
- CIE Lab
- lab(39.92 6.43 13.09)
- LCH
- lch(39.92 14.58 63.8)
- CMYK
- cmyk(0% 18% 34% 57%)
Tons claros · Sombras · Tons
Tons claros
- 7C695A
- 89796A
- 97887C
- A6998E
- B4A9A0
- C3BAB2
- D2CBC5
- E1DCD8
- F0EDEB
Sombras
- 5F4D3E
- 504134
- 41352A
- 332920
- 261E17
- 19130E
- 0E0906
- 040302
- 010000
Tons
- 705E4E
- 726254
- 746559
- 75695F
- 776D64
- 79716A
- 7B756F
- 7D7875
- 7E7C7A
Harmonias de cor
Complementar +180°
- 6E5A49
Christmas Ornament
- 4C6172
≈ English Channel
Análoga -30° +30°
- 6E5A49
Christmas Ornament
- 725751
≈ Brown Ridge
- 665E46
≈ Squirrel’s Nest
Tríade +120° +240°
- 6E5A49
Christmas Ornament
- 476660
≈ Grand Prix
- 625A70
≈ Head Over Heels
Complementar dividida +150° +210°
- 6E5A49
Christmas Ornament
- 46646B
≈ Night Folly
- 575D74
≈ Agate Violet
Tétrade +90° +180° +270°
- 6E5A49
Christmas Ornament
- 4F6554
≈ Pasture Green
- 4C6172
≈ English Channel
- 6B5768
≈ Dark Purple Grey
Contraste e acessibilidade
Ag
AASobre branco
WCAG 6.51:1 · APCA Lc 82
Ag
FailSobre preto
WCAG 3.22:1 · APCA Lc 20
Melhor cor de texto: #FFFFFF
WCAG 6.51:1 (AA) · APCA Lc 82
Contrast pairs
Trechos de código
CSS
:root {
--christmas-ornament: #6e5a49;
--christmas-ornament-rgb: 110 90 73;
--christmas-ornament-oklch: oklch(0.483 0.037 62.1);
}
.element {
color: var(--christmas-ornament);
background-color: hsl(28 20% 36%);
border-color: oklch(0.483 0.037 62.1);
}Tailwind CSS v4
@theme {
--color-christmas-ornament: #6e5a49;
--color-christmas-ornament-50: #fdf3ea;
--color-christmas-ornament-100: #f1e6db;
--color-christmas-ornament-200: #e0d1c4;
--color-christmas-ornament-300: #c5b4a4;
--color-christmas-ornament-400: #af9a89;
--color-christmas-ornament-500: #99816d;
--color-christmas-ornament-600: #816d5d;
--color-christmas-ornament-700: #67574a;
--color-christmas-ornament-800: #4c4036;
--color-christmas-ornament-900: #352c25;
--color-christmas-ornament-950: #201913;
}SCSS
$christmas-ornament: #6e5a49;
$christmas-ornament-rgb: 110, 90, 73;
$christmas-ornament-light: mix(#fff, $christmas-ornament, 20%);
$christmas-ornament-dark: mix(#000, $christmas-ornament, 20%);
.element {
color: $christmas-ornament;
box-shadow: 0 0 0 2px rgba($christmas-ornament, 0.35);
}