Cor nomeada · #9B7E65
Home Sweet Home
Home Sweet Home é #9B7E65: rgb(155 126 101), hsl(28 21% 50%), oklch(0.614 0.051 62.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Home Sweet Home color name →
#9B7E65
oklch(0.614 0.051 62.4)
Conversões de cor
- HEX
- #9b7e65
- RGB
- rgb(155 126 101)
- HSL
- hsl(28 21% 50%)
- HWB
- hwb(28 40% 39%)
- OKLCH
- oklch(0.614 0.051 62.4)
- OKLab
- oklab(0.614 0.024 0.045)
- CIE Lab
- lab(55.11 8.83 18.09)
- LCH
- lch(55.11 20.13 64)
- CMYK
- cmyk(0% 19% 35% 39%)
Tons claros · Sombras · Tons
Tons claros
- A58A74
- AF9782
- B9A391
- C2B0A0
- CCBDB0
- D6CABF
- E1D7CF
- EBE4DF
- F5F1EF
Sombras
- 866D57
- 725C49
- 5E4C3C
- 4B3C2F
- 392D22
- 281F17
- 18110C
- 090503
- 010100
Tons
- 987E68
- 967F6B
- 937F6E
- 907F70
- 8E7F73
- 8B7F76
- 888078
- 86807B
- 83807D
Harmonias de cor
Complementar +180°
- 9B7E65
Home Sweet Home
- 6A89A1
≈ Sporty Blue
Análoga -30° +30°
- 9B7E65
Home Sweet Home
- A17A71
≈ Burnished Brown
- 8F8461
≈ Grant Drab
Tríade +120° +240°
- 9B7E65
Home Sweet Home
- 618F87
≈ Chlorite
- 8A7D9E
≈ Second Pour
Complementar dividida +150° +210°
- 9B7E65
Home Sweet Home
- 608D96
≈ Oarsman Blue
- 7A83A4
≈ Romanesque
Tétrade +90° +180° +270°
- 9B7E65
Home Sweet Home
- 6E8E76
≈ Ivy Wreath
- 6A89A1
≈ Sporty Blue
- 977992
≈ Mountbatten Pink
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 3.77:1 · APCA Lc 65
Ag
AASobre preto
WCAG 5.56:1 · APCA Lc 36
Melhor cor de texto: #000000
WCAG 5.56:1 (AA) · APCA Lc 36
Contrast pairs
Trechos de código
CSS
:root {
--home-sweet-home: #9b7e65;
--home-sweet-home-rgb: 155 126 101;
--home-sweet-home-oklch: oklch(0.614 0.051 62.4);
}
.element {
color: var(--home-sweet-home);
background-color: hsl(28 21% 50%);
border-color: oklch(0.614 0.051 62.4);
}Tailwind CSS v4
@theme {
--color-home-sweet-home: #9b7e65;
--color-home-sweet-home-50: #fff3e6;
--color-home-sweet-home-100: #f4e5d7;
--color-home-sweet-home-200: #e4d0be;
--color-home-sweet-home-300: #cab39d;
--color-home-sweet-home-400: #b59880;
--color-home-sweet-home-500: #9f7f63;
--color-home-sweet-home-600: #866c54;
--color-home-sweet-home-700: #6c5643;
--color-home-sweet-home-800: #503e31;
--color-home-sweet-home-900: #372b21;
--color-home-sweet-home-950: #221810;
}SCSS
$home-sweet-home: #9b7e65;
$home-sweet-home-rgb: 155, 126, 101;
$home-sweet-home-light: mix(#fff, $home-sweet-home, 20%);
$home-sweet-home-dark: mix(#000, $home-sweet-home, 20%);
.element {
color: $home-sweet-home;
box-shadow: 0 0 0 2px rgba($home-sweet-home, 0.35);
}