命名颜色 · #BB993A

Golden History

Golden History 即 #BB993A：rgb(187 153 58)、hsl(44 53% 48%)、oklch(0.697 0.119 89)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Yellow mean? → · Golden History color name →

#BB993A

oklch(0.697 0.119 89)

颜色转换

HEX: #bb993a
RGB: rgb(187 153 58)
HSL: hsl(44 53% 48%)
HWB: hwb(44 23% 27%)
OKLCH: oklch(0.697 0.119 89)
OKLab: oklab(0.697 0.002 0.119)
CIE Lab: lab(65.08 5.62 52.73)
LCH: lch(65.08 53.03 83.9)
CMYK: cmyk(0% 18% 69% 27%)

浅色调 · 深色调 · 灰色调

浅色调

C2A352
C8AD67
CFB87B
D6C28E
DDCCA1
E4D6B4
EAE0C7
F1EBD9
F8F5EC

深色调

A28431
8A7028
735D20
5C4A18
463810
322709
1F1704
0D0801
020100

灰色调

B59745
AF944F
A99257
A3905E
9D8D65
978B6B
918871
8C8576
86837B

配色和谐

互补色 +180°

BB993A
Golden History
7F99E7
≈ Portage

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 2.71:1 · APCA Lc 53

Fail

黑底

WCAG 7.73:1 · APCA Lc 49

AAA

最佳文字颜色: #000000

WCAG 7.73:1 (AAA) · APCA Lc 49

Contrast pairs

代码片段

CSS

:root {
  --golden-history: #bb993a;
  --golden-history-rgb: 187 153 58;
  --golden-history-oklch: oklch(0.697 0.119 89);
}

.element {
  color: var(--golden-history);
  background-color: hsl(44 53% 48%);
  border-color: oklch(0.697 0.119 89);
}

Tailwind CSS v4

@theme {
  --color-golden-history: #bb993a;
  --color-golden-history-50: #fff5cf;
  --color-golden-history-100: #f7e7bb;
  --color-golden-history-200: #e7d39a;
  --color-golden-history-300: #ceb56e;
  --color-golden-history-400: #bb9a43;
  --color-golden-history-500: #a68100;
  --color-golden-history-600: #8c6d00;
  --color-golden-history-700: #705703;
  --color-golden-history-800: #543f01;
  --color-golden-history-900: #3b2b02;
  --color-golden-history-950: #251800;
}

SCSS

$golden-history: #bb993a;
$golden-history-rgb: 187, 153, 58;
$golden-history-light: mix(#fff, $golden-history, 20%);
$golden-history-dark: mix(#000, $golden-history, 20%);

.element {
  color: $golden-history;
  box-shadow: 0 0 0 2px rgba($golden-history, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

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