命名颜色 · #B8BABA

Rocky Shelter

Rocky Shelter 即 #B8BABA：rgb(184 186 186)、hsl(180 1% 73%)、oklch(0.787 0.002 197.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Rocky Shelter color name →

#B8BABA

oklch(0.787 0.002 197.1)

颜色转换

HEX: #b8baba
RGB: rgb(184 186 186)
HSL: hsl(180 1% 73%)
HWB: hwb(180 72% 27%)
OKLCH: oklch(0.787 0.002 197.1)
OKLab: oklab(0.787 -0.002 -0.001)
CIE Lab: lab(75.35 -0.72 -0.26)
LCH: lch(75.35 0.77 199.6)
CMYK: cmyk(1% 0% 0% 27%)

浅色调 · 深色调 · 灰色调

浅色调

BFC1C1
C6C7C7
CDCECE
D4D5D5
DBDCDC
E2E3E3
E9EAEA
F0F1F1
F8F8F8

深色调

A0A1A1
888989
717272
5B5C5C
454646
313232
1E1E1E
0C0D0D
020202

灰色调

B2B4B4
ADAEAE
A7A8A8
A1A2A2
9C9D9D
969797
909191
8B8B8B
858686

配色和谐

互补色 +180°

B8BABA
Rocky Shelter
BBB9B9
≈ Baby Talk Grey

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.94:1 · APCA Lc 37

Fail

黑底

WCAG 10.77:1 · APCA Lc 65

AAA

最佳文字颜色: #000000

WCAG 10.77:1 (AAA) · APCA Lc 65

Contrast pairs

代码片段

CSS

:root {
  --rocky-shelter: #b8baba;
  --rocky-shelter-rgb: 184 186 186;
  --rocky-shelter-oklch: oklch(0.787 0.002 197.1);
}

.element {
  color: var(--rocky-shelter);
  background-color: hsl(180 1% 73%);
  border-color: oklch(0.787 0.002 197.1);
}

Tailwind CSS v4

@theme {
  --color-rocky-shelter: #b8baba;
  --color-rocky-shelter-50: #f4f5f5;
  --color-rocky-shelter-100: #e7e8e8;
  --color-rocky-shelter-200: #d3d4d4;
  --color-rocky-shelter-300: #b6b8b8;
  --color-rocky-shelter-400: #9d9f9f;
  --color-rocky-shelter-500: #848787;
  --color-rocky-shelter-600: #707272;
  --color-rocky-shelter-700: #5a5b5b;
  --color-rocky-shelter-800: #414342;
  --color-rocky-shelter-900: #2d2e2e;
  --color-rocky-shelter-950: #1a1b1b;
}

SCSS

$rocky-shelter: #b8baba;
$rocky-shelter-rgb: 184, 186, 186;
$rocky-shelter-light: mix(#fff, $rocky-shelter, 20%);
$rocky-shelter-dark: mix(#000, $rocky-shelter, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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