命名颜色 · #5C4450

Purple Basil

Purple Basil 即 #5C4450：rgb(92 68 80)、hsl(330 15% 31%)、oklch(0.417 0.038 347.4)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Pink mean? → · Purple Basil color name →

#5C4450

oklch(0.417 0.038 347.4)

颜色转换

HEX: #5c4450
RGB: rgb(92 68 80)
HSL: hsl(330 15% 31%)
HWB: hwb(330 27% 64%)
OKLCH: oklch(0.417 0.038 347.4)
OKLab: oklab(0.417 0.037 -0.008)
CIE Lab: lab(31.83 12.27 -3)
LCH: lch(31.83 12.63 346.3)
CMYK: cmyk(0% 26% 13% 64%)

浅色调 · 深色调 · 灰色调

浅色调

6B5560
7B6670
8A7881
9A8A92
AB9CA3
BBAFB5
CCC3C7
DDD7D9
EEEBEC

深色调

4F3A44
423039
36262E
2A1D24
1F141A
140C10
0A0507
030202
000000

灰色调

604A55
635059
67565E
6B5B63
6E6168
72676C
756E71
797476
7C7A7B

配色和谐

互补色 +180°

5C4450
Purple Basil
385348
≈ Sharknado

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 8.75:1 · APCA Lc 90

AAA

黑底

WCAG 2.39:1 · APCA Lc 12

Fail

最佳文字颜色: #FFFFFF

WCAG 8.75:1 (AAA) · APCA Lc 90

Contrast pairs

代码片段

CSS

:root {
  --purple-basil: #5c4450;
  --purple-basil-rgb: 92 68 80;
  --purple-basil-oklch: oklch(0.417 0.038 347.4);
}

.element {
  color: var(--purple-basil);
  background-color: hsl(330 15% 31%);
  border-color: oklch(0.417 0.038 347.4);
}

Tailwind CSS v4

@theme {
  --color-purple-basil: #5c4450;
  --color-purple-basil-50: #fef1f7;
  --color-purple-basil-100: #f2e3ea;
  --color-purple-basil-200: #e2ced7;
  --color-purple-basil-300: #c7b0ba;
  --color-purple-basil-400: #b096a3;
  --color-purple-basil-500: #9a7c8b;
  --color-purple-basil-600: #826975;
  --color-purple-basil-700: #68545e;
  --color-purple-basil-800: #4c3d45;
  --color-purple-basil-900: #352a30;
  --color-purple-basil-950: #20181c;
}

SCSS

$purple-basil: #5c4450;
$purple-basil-rgb: 92, 68, 80;
$purple-basil-light: mix(#fff, $purple-basil, 20%);
$purple-basil-dark: mix(#000, $purple-basil, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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