Cor nomeada · #CF9A5D
Butternut Tree
Butternut Tree é #CF9A5D: rgb(207 154 93), hsl(32 54% 59%), oklch(0.724 0.101 69). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Orange mean? → · Butternut Tree color name →
#CF9A5D
oklch(0.724 0.101 69)
Conversões de cor
- HEX
- #cf9a5d
- RGB
- rgb(207 154 93)
- HSL
- hsl(32 54% 59%)
- HWB
- hwb(32 36% 19%)
- OKLCH
- oklch(0.724 0.101 69)
- OKLab
- oklab(0.724 0.036 0.094)
- CIE Lab
- lab(67.81 15.41 39.84)
- LCH
- lch(67.81 42.72 68.9)
- CMYK
- cmyk(0% 26% 55% 19%)
Tons claros · Sombras · Tons
Tons claros
- D4A46E
- D9AE7F
- DEB88F
- E3C29F
- E8CCAF
- EDD6BF
- F1E1CF
- F6EBDF
- FBF5EF
Sombras
- B48550
- 997143
- 7F5E37
- 674B2A
- 4F391F
- 382714
- 23170A
- 100903
- 020100
Tons
- C79862
- BF9566
- B7936A
- AF906E
- A78E72
- A08B75
- 988878
- 90867B
- 88837D
Harmonias de cor
Complementar +180°
- CF9A5D
Butternut Tree
- 72ABE2
≈ Jordy Blue
Análoga -30° +30°
- CF9A5D
Butternut Tree
- DC9076
≈ Buffed Copper
- B5A759
≈ Moss Stone
Tríade +120° +240°
- CF9A5D
Butternut Tree
- 4BBAB3
≈ Arctic Green
- B894D6
≈ Lenurple
Complementar dividida +150° +210°
- CF9A5D
Butternut Tree
- 51B5D1
≈ Blue Martini
- 989FE4
≈ Cold Lips
Tétrade +90° +180° +270°
- CF9A5D
Butternut Tree
- 6AB98F
≈ Garden Variety
- 72ABE2
≈ Jordy Blue
- D08DBB
≈ Pressed Flower
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 2.49:1 · APCA Lc 49
Ag
AAASobre preto
WCAG 8.43:1 · APCA Lc 53
Melhor cor de texto: #000000
WCAG 8.43:1 (AAA) · APCA Lc 53
Contrast pairs
Trechos de código
CSS
:root {
--butternut-tree: #cf9a5d;
--butternut-tree-rgb: 207 154 93;
--butternut-tree-oklch: oklch(0.724 0.101 69);
}
.element {
color: var(--butternut-tree);
background-color: hsl(32 54% 59%);
border-color: oklch(0.724 0.101 69);
}Tailwind CSS v4
@theme {
--color-butternut-tree: #cf9a5d;
--color-butternut-tree-50: #fff1d7;
--color-butternut-tree-100: #fee3c4;
--color-butternut-tree-200: #f0cea6;
--color-butternut-tree-300: #d8af7e;
--color-butternut-tree-400: #c5935a;
--color-butternut-tree-500: #b17932;
--color-butternut-tree-600: #96662c;
--color-butternut-tree-700: #785223;
--color-butternut-tree-800: #593b18;
--color-butternut-tree-900: #3f280f;
--color-butternut-tree-950: #281603;
}SCSS
$butternut-tree: #cf9a5d;
$butternut-tree-rgb: 207, 154, 93;
$butternut-tree-light: mix(#fff, $butternut-tree, 20%);
$butternut-tree-dark: mix(#000, $butternut-tree, 20%);
.element {
color: $butternut-tree;
box-shadow: 0 0 0 2px rgba($butternut-tree, 0.35);
}