命名颜色 · #BCCAB3

Bok Choy

Bok Choy 即 #BCCAB3：rgb(188 202 179)、hsl(97 18% 75%)、oklch(0.822 0.035 133)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Green mean? → · Bok Choy color name →

#BCCAB3

oklch(0.822 0.035 133)

颜色转换

HEX: #bccab3
RGB: rgb(188 202 179)
HSL: hsl(97 18% 75%)
HWB: hwb(97 70% 21%)
OKLCH: oklch(0.822 0.035 133)
OKLab: oklab(0.822 -0.024 0.026)
CIE Lab: lab(79.76 -8.09 9.82)
LCH: lch(79.76 12.72 129.5)
CMYK: cmyk(7% 0% 11% 21%)

浅色调 · 深色调 · 灰色调

浅色调

C3CFBA
C9D4C2
D0DAC9
D6DFD1
DDE4D9
E4EAE0
EBEFE8
F1F4EF
F8FAF7

深色调

A3AF9B
8B9584
737C6E
5D6458
474D43
32372F
1F221D
0D0F0C
020201

灰色调

B6C2AE
B0BBA9
AAB3A3
A4AC9E
9EA499
989D94
92968F
8C8E8A
868785

配色和谐

互补色 +180°

BCCAB3
Bok Choy
CDBFD5
≈ Awesome Aura

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.71:1 · APCA Lc 31

Fail

黑底

WCAG 12.23:1 · APCA Lc 72

AAA

最佳文字颜色: #000000

WCAG 12.23:1 (AAA) · APCA Lc 72

Contrast pairs

代码片段

CSS

:root {
  --bok-choy: #bccab3;
  --bok-choy-rgb: 188 202 179;
  --bok-choy-oklch: oklch(0.822 0.035 133);
}

.element {
  color: var(--bok-choy);
  background-color: hsl(97 18% 75%);
  border-color: oklch(0.822 0.035 133);
}

Tailwind CSS v4

@theme {
  --color-bok-choy: #bccab3;
  --color-bok-choy-50: #f1f8ee;
  --color-bok-choy-100: #e3ebdf;
  --color-bok-choy-200: #ced8c9;
  --color-bok-choy-300: #b0bcaa;
  --color-bok-choy-400: #96a38e;
  --color-bok-choy-500: #7d8c74;
  --color-bok-choy-600: #6a7662;
  --color-bok-choy-700: #555e4e;
  --color-bok-choy-800: #3e4538;
  --color-bok-choy-900: #2b3027;
  --color-bok-choy-950: #181c15;
}

SCSS

$bok-choy: #bccab3;
$bok-choy-rgb: 188, 202, 179;
$bok-choy-light: mix(#fff, $bok-choy, 20%);
$bok-choy-dark: mix(#000, $bok-choy, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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