命名颜色 · #377B70

Pearl Green

Pearl Green 即 #377B70：rgb(55 123 112)、hsl(170 38% 35%)、oklch(0.536 0.071 181.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Teal mean? → · Pearl Green color name →

#377B70

oklch(0.536 0.071 181.4)

颜色转换

HEX: #377b70
RGB: rgb(55 123 112)
HSL: hsl(170 38% 35%)
HWB: hwb(170 22% 52%)
OKLCH: oklch(0.536 0.071 181.4)
OKLab: oklab(0.536 -0.071 -0.002)
CIE Lab: lab(47.02 -24.71 -0.87)
LCH: lch(47.02 24.72 182)
CMYK: cmyk(55% 0% 9% 52%)

浅色调 · 深色调 · 灰色调

浅色调

4D887D
61948B
75A199
88AEA7
9CBBB5
AFC9C3
C3D6D2
D7E4E1
EBF1F0

深色调

2E6A60
265A51
1E4A43
163A35
0F2C27
081E1A
03100E
010504
000101

灰色调

417C72
497C73
517D75
597D76
607E78
677E7A
6D7F7B
747F7D
7A807E

配色和谐

互补色 +180°

377B70
Pearl Green
905C6A
≈ Cabernet

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 4.96:1 · APCA Lc 74

黑底

WCAG 4.22:1 · APCA Lc 28

Fail

最佳文字颜色: #FFFFFF

WCAG 4.96:1 (AA) · APCA Lc 74

Contrast pairs

代码片段

CSS

:root {
  --pearl-green: #377b70;
  --pearl-green-rgb: 55 123 112;
  --pearl-green-oklch: oklch(0.536 0.071 181.4);
}

.element {
  color: var(--pearl-green);
  background-color: hsl(170 38% 35%);
  border-color: oklch(0.536 0.071 181.4);
}

Tailwind CSS v4

@theme {
  --color-pearl-green: #377b70;
  --color-pearl-green-50: #e0fcf7;
  --color-pearl-green-100: #cff0ea;
  --color-pearl-green-200: #b3dfd7;
  --color-pearl-green-300: #8ec4bb;
  --color-pearl-green-400: #6dada1;
  --color-pearl-green-500: #4a9689;
  --color-pearl-green-600: #3f7f74;
  --color-pearl-green-700: #32655d;
  --color-pearl-green-800: #244b43;
  --color-pearl-green-900: #18342e;
  --color-pearl-green-950: #081f1b;
}

SCSS

$pearl-green: #377b70;
$pearl-green-rgb: 55, 123, 112;
$pearl-green-light: mix(#fff, $pearl-green, 20%);
$pearl-green-dark: mix(#000, $pearl-green, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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