Color con nombre · #B77D42
Spruce Yellow
Spruce Yellow es #B77D42: rgb(183 125 66), hsl(30 47% 49%), oklch(0.637 0.104 64.4). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Spruce Yellow color name →
#B77D42
oklch(0.637 0.104 64.4)
Conversiones de color
- HEX
- #b77d42
- RGB
- rgb(183 125 66)
- HSL
- hsl(30 47% 49%)
- HWB
- hwb(30 26% 28%)
- OKLCH
- oklch(0.637 0.104 64.4)
- OKLab
- oklab(0.637 0.045 0.094)
- CIE Lab
- lab(57.62 18.9 41.02)
- LCH
- lch(57.62 45.17 65.3)
- CMYK
- cmyk(0% 32% 64% 28%)
Tintes · Sombras · Tonos
Tintes
- BF8A56
- C69769
- CEA37C
- D5B08F
- DCBDA1
- E3CAB4
- EAD7C6
- F1E4D9
- F8F2EC
Sombras
- 9F6C38
- 875B2F
- 704B25
- 5A3B1C
- 452C14
- 311E0B
- 1E1105
- 0C0501
- 020100
Tonos
- B27E4A
- AC7E52
- A77F58
- A27F5F
- 9C8065
- 97806B
- 918070
- 8C8076
- 86807B
Armonías de color
Complementario +180°
- B77D42
Spruce Yellow
- 4F92C6
≈ Azure Blue
Análogo -30° +30°
- B77D42
Spruce Yellow
- C27360
≈ Cajun Spice
- A08A38
≈ Autumn Festival
Triádico +120° +240°
- B77D42
Spruce Yellow
- 24A093
≈ Alhambra
- 997BBF
≈ Lavender Purple
Complementario dividido +150° +210°
- B77D42
Spruce Yellow
- 239BB2
≈ Pelorus
- 7886CB
≈ Twilight Twinkle
Tetrádico +90° +180° +270°
- B77D42
Spruce Yellow
- 539E6E
≈ Basil Pesto
- 4F92C6
≈ Azure Blue
- B272A5
≈ Orchid Kiss
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 3.48:1 · APCA Lc 62
Ag
AASobre negro
WCAG 6.02:1 · APCA Lc 39
Mejor color de texto: #000000
WCAG 6.02:1 (AA) · APCA Lc 39
Contrast pairs
Fragmentos de código
CSS
:root {
--spruce-yellow: #b77d42;
--spruce-yellow-rgb: 183 125 66;
--spruce-yellow-oklch: oklch(0.637 0.104 64.4);
}
.element {
color: var(--spruce-yellow);
background-color: hsl(30 47% 49%);
border-color: oklch(0.637 0.104 64.4);
}Tailwind CSS v4
@theme {
--color-spruce-yellow: #b77d42;
--color-spruce-yellow-50: #fff0d6;
--color-spruce-yellow-100: #ffe2c4;
--color-spruce-yellow-200: #f3cca5;
--color-spruce-yellow-300: #dcad7e;
--color-spruce-yellow-400: #c9915a;
--color-spruce-yellow-500: #b57632;
--color-spruce-yellow-600: #99642c;
--color-spruce-yellow-700: #7b5023;
--color-spruce-yellow-800: #5c3918;
--color-spruce-yellow-900: #40270f;
--color-spruce-yellow-950: #291503;
}SCSS
$spruce-yellow: #b77d42;
$spruce-yellow-rgb: 183, 125, 66;
$spruce-yellow-light: mix(#fff, $spruce-yellow, 20%);
$spruce-yellow-dark: mix(#000, $spruce-yellow, 20%);
.element {
color: $spruce-yellow;
box-shadow: 0 0 0 2px rgba($spruce-yellow, 0.35);
}