Benannte Farbe · #B08843
Butterscotch Ripple
Butterscotch Ripple ist #B08843: rgb(176 136 67), hsl(38 45% 48%), oklch(0.651 0.1 79.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Butterscotch Ripple color name →
#B08843
oklch(0.651 0.1 79.1)
Farbumrechnungen
- HEX
- #b08843
- RGB
- rgb(176 136 67)
- HSL
- hsl(38 45% 48%)
- HWB
- hwb(38 26% 31%)
- OKLCH
- oklch(0.651 0.1 79.1)
- OKLab
- oklab(0.651 0.019 0.098)
- CIE Lab
- lab(59.57 10.09 42.4)
- LCH
- lch(59.57 43.59 76.6)
- CMYK
- cmyk(0% 23% 62% 31%)
Tints · Shades · Tones
Tints
- B89457
- C09F6B
- C8AB7D
- D0B790
- D8C3A2
- DFCFB4
- E7DBC7
- EFE7D9
- F7F3EC
Shades
- 997539
- 82632F
- 6C5226
- 56411D
- 423114
- 2E220C
- 1C1305
- 0B0601
- 010100
Tones
- AB874B
- A78753
- A28659
- 9D8560
- 988566
- 93846B
- 8F8371
- 8A8276
- 85817B
Farbharmonien
Komplementär +180°
- B08843
Butterscotch Ripple
- 6A90CC
≈ Bashful Blue
Analog -30° +30°
- B08843
Butterscotch Ripple
- C17D57
≈ Pheasant
- 949448
≈ Winter Pea Green
Triadisch +120° +240°
- B08843
Butterscotch Ripple
- 2DA2A6
≈ Cancer Seagreen Scarab
- AA7BB6
≈ Berries Galore
Geteilt komplementär +150° +210°
- B08843
Butterscotch Ripple
- 439BC0
≈ Norse Blue
- 8E85C9
≈ Amethyst Grey
Tetradisch +90° +180° +270°
- B08843
Butterscotch Ripple
- 46A385
≈ Klimt Green
- 6A90CC
≈ Bashful Blue
- BD7699
≈ Benifuji
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 3.25:1 · APCA Lc 60
Ag
AAAuf Schwarz
WCAG 6.44:1 · APCA Lc 42
Beste Textfarbe: #000000
WCAG 6.44:1 (AA) · APCA Lc 42
Contrast pairs
Code-Snippets
CSS
:root {
--butterscotch-ripple: #b08843;
--butterscotch-ripple-rgb: 176 136 67;
--butterscotch-ripple-oklch: oklch(0.651 0.1 79.1);
}
.element {
color: var(--butterscotch-ripple);
background-color: hsl(38 45% 48%);
border-color: oklch(0.651 0.1 79.1);
}Tailwind CSS v4
@theme {
--color-butterscotch-ripple: #b08843;
--color-butterscotch-ripple-50: #fff3d6;
--color-butterscotch-ripple-100: #f9e5c3;
--color-butterscotch-ripple-200: #ead1a4;
--color-butterscotch-ripple-300: #d2b37c;
--color-butterscotch-ripple-400: #be9857;
--color-butterscotch-ripple-500: #a97e2d;
--color-butterscotch-ripple-600: #8f6a28;
--color-butterscotch-ripple-700: #735520;
--color-butterscotch-ripple-800: #563d15;
--color-butterscotch-ripple-900: #3c2a0d;
--color-butterscotch-ripple-950: #251802;
}SCSS
$butterscotch-ripple: #b08843;
$butterscotch-ripple-rgb: 176, 136, 67;
$butterscotch-ripple-light: mix(#fff, $butterscotch-ripple, 20%);
$butterscotch-ripple-dark: mix(#000, $butterscotch-ripple, 20%);
.element {
color: $butterscotch-ripple;
box-shadow: 0 0 0 2px rgba($butterscotch-ripple, 0.35);
}