命名颜色 · #555054

Soft Panther

Soft Panther 即 #555054：rgb(85 80 84)、hsl(312 3% 32%)、oklch(0.437 0.009 332.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Soft Panther color name →

#555054

oklch(0.437 0.009 332.3)

颜色转换

HEX: #555054
RGB: rgb(85 80 84)
HSL: hsl(312 3% 32%)
HWB: hwb(312 31% 67%)
OKLCH: oklch(0.437 0.009 332.3)
OKLab: oklab(0.437 0.008 -0.004)
CIE Lab: lab(34.62 2.75 -1.58)
LCH: lch(34.62 3.17 330.1)
CMYK: cmyk(0% 6% 1% 67%)

浅色调 · 深色调 · 灰色调

浅色调

646063
747073
848184
959294
A6A3A5
B7B5B7
C9C7C8
DBD9DA
EDECEC

深色调

494448
3D393C
312E31
262426
1C1A1B
111011
080708
020202
000000

灰色调

595558
5D595D
625E61
666365
6A686A
6E6C6E
737172
777677
7C7B7B

配色和谐

互补色 +180°

555054
Soft Panther
4E534F
≈ Cape Cod

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 7.88:1 · APCA Lc 87

AAA

黑底

WCAG 2.66:1 · APCA Lc 15

Fail

最佳文字颜色: #FFFFFF

WCAG 7.88:1 (AAA) · APCA Lc 87

Contrast pairs

代码片段

CSS

:root {
  --soft-panther: #555054;
  --soft-panther-rgb: 85 80 84;
  --soft-panther-oklch: oklch(0.437 0.009 332.3);
}

.element {
  color: var(--soft-panther);
  background-color: hsl(312 3% 32%);
  border-color: oklch(0.437 0.009 332.3);
}

Tailwind CSS v4

@theme {
  --color-soft-panther: #555054;
  --color-soft-panther-50: #f7f4f6;
  --color-soft-panther-100: #eae7e9;
  --color-soft-panther-200: #d7d3d6;
  --color-soft-panther-300: #bab6b9;
  --color-soft-panther-400: #a29ca1;
  --color-soft-panther-500: #8a8489;
  --color-soft-panther-600: #757074;
  --color-soft-panther-700: #5d595d;
  --color-soft-panther-800: #444144;
  --color-soft-panther-900: #2f2d2f;
  --color-soft-panther-950: #1c1a1b;
}

SCSS

$soft-panther: #555054;
$soft-panther-rgb: 85, 80, 84;
$soft-panther-light: mix(#fff, $soft-panther, 20%);
$soft-panther-dark: mix(#000, $soft-panther, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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