命名颜色 · #B08843

Butterscotch Ripple

Butterscotch Ripple 即 #B08843：rgb(176 136 67)、hsl(38 45% 48%)、oklch(0.651 0.1 79.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Butterscotch Ripple color name →

#B08843

oklch(0.651 0.1 79.1)

颜色转换

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%)

浅色调 · 深色调 · 灰色调

浅色调

B89457
C09F6B
C8AB7D
D0B790
D8C3A2
DFCFB4
E7DBC7
EFE7D9
F7F3EC

深色调

997539
82632F
6C5226
56411D
423114
2E220C
1C1305
0B0601
010100

灰色调

AB874B
A78753
A28659
9D8560
988566
93846B
8F8371
8A8276
85817B

配色和谐

互补色 +180°

B08843
Butterscotch Ripple
6A90CC
≈ Bashful Blue

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

四角配色 +90° +180° +270°

对比度与无障碍

白底

WCAG 3.25:1 · APCA Lc 60

Fail

黑底

WCAG 6.44:1 · APCA Lc 42

最佳文字颜色: #000000

WCAG 6.44:1 (AA) · APCA Lc 42

Contrast pairs

代码片段

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);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

取色器配色组合对比度检测 Studio JSON API