命名颜色 · #CABFBF

Nantucket Mist

Nantucket Mist 即 #CABFBF：rgb(202 191 191)、hsl(0 9% 77%)、oklch(0.814 0.012 17.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Nantucket Mist color name →

#CABFBF

oklch(0.814 0.012 17.4)

颜色转换

HEX: #cabfbf
RGB: rgb(202 191 191)
HSL: hsl(0 9% 77%)
HWB: hwb(0 75% 21%)
OKLCH: oklch(0.814 0.012 17.4)
OKLab: oklab(0.814 0.012 0.004)
CIE Lab: lab(78.26 4 1.46)
LCH: lch(78.26 4.26 20)
CMYK: cmyk(0% 5% 5% 21%)

浅色调 · 深色调 · 灰色调

浅色调

CFC5C5
D4CCCC
DAD2D2
DFD8D8
E4DFDF
EAE5E5
EFEBEB
F4F2F2
FAF8F8

深色调

AFA6A6
958D8D
7C7575
645E5E
4D4848
373333
221F1F
0F0D0D
020202

灰色调

C2B9B8
BBB2B2
B3ACAC
ACA5A5
A49F9F
9D9999
969292
8E8C8C
878686

配色和谐

互补色 +180°

CABFBF
Nantucket Mist
B9C5C5
≈ Trade Winds

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.79:1 · APCA Lc 33

Fail

黑底

WCAG 11.71:1 · APCA Lc 69

AAA

最佳文字颜色: #000000

WCAG 11.71:1 (AAA) · APCA Lc 69

Contrast pairs

代码片段

CSS

:root {
  --nantucket-mist: #cabfbf;
  --nantucket-mist-rgb: 202 191 191;
  --nantucket-mist-oklch: oklch(0.814 0.012 17.4);
}

.element {
  color: var(--nantucket-mist);
  background-color: hsl(0 9% 77%);
  border-color: oklch(0.814 0.012 17.4);
}

Tailwind CSS v4

@theme {
  --color-nantucket-mist: #cabfbf;
  --color-nantucket-mist-50: #f9f4f4;
  --color-nantucket-mist-100: #ece6e6;
  --color-nantucket-mist-200: #d9d2d2;
  --color-nantucket-mist-300: #beb5b5;
  --color-nantucket-mist-400: #a69c9c;
  --color-nantucket-mist-500: #8e8383;
  --color-nantucket-mist-600: #786f6f;
  --color-nantucket-mist-700: #605959;
  --color-nantucket-mist-800: #474141;
  --color-nantucket-mist-900: #312d2d;
  --color-nantucket-mist-950: #1d1a1a;
}

SCSS

$nantucket-mist: #cabfbf;
$nantucket-mist-rgb: 202, 191, 191;
$nantucket-mist-light: mix(#fff, $nantucket-mist, 20%);
$nantucket-mist-dark: mix(#000, $nantucket-mist, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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