Benoemde kleur · #CF9A5D
Butternut Tree
Butternut Tree is #CF9A5D: rgb(207 154 93), hsl(32 54% 59%), oklch(0.724 0.101 69). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Orange mean? → · Butternut Tree color name →
#CF9A5D
oklch(0.724 0.101 69)
Kleurconversies
- 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%)
Tinten · Schaduwen · Tonen
Tinten
- D4A46E
- D9AE7F
- DEB88F
- E3C29F
- E8CCAF
- EDD6BF
- F1E1CF
- F6EBDF
- FBF5EF
Schaduwen
- B48550
- 997143
- 7F5E37
- 674B2A
- 4F391F
- 382714
- 23170A
- 100903
- 020100
Tonen
- C79862
- BF9566
- B7936A
- AF906E
- A78E72
- A08B75
- 988878
- 90867B
- 88837D
Kleurharmonieën
Complementair +180°
- CF9A5D
Butternut Tree
- 72ABE2
≈ Jordy Blue
Analoog -30° +30°
- CF9A5D
Butternut Tree
- DC9076
≈ Buffed Copper
- B5A759
≈ Moss Stone
Triadisch +120° +240°
- CF9A5D
Butternut Tree
- 4BBAB3
≈ Arctic Green
- B894D6
≈ Lenurple
Gesplitst complementair +150° +210°
- CF9A5D
Butternut Tree
- 51B5D1
≈ Blue Martini
- 989FE4
≈ Cold Lips
Tetradisch +90° +180° +270°
- CF9A5D
Butternut Tree
- 6AB98F
≈ Garden Variety
- 72ABE2
≈ Jordy Blue
- D08DBB
≈ Pressed Flower
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.49:1 · APCA Lc 49
Ag
AAAOp zwart
WCAG 8.43:1 · APCA Lc 53
Beste tekstkleur: #000000
WCAG 8.43:1 (AAA) · APCA Lc 53
Contrast pairs
Codefragmenten
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);
}