命名颜色 · #B47571

Canyon Rose

Canyon Rose 即 #B47571：rgb(180 117 113)、hsl(4 31% 57%)、oklch(0.627 0.08 23.6)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Red mean? → · Canyon Rose color name →

#B47571

oklch(0.627 0.08 23.6)

颜色转换

HEX: #b47571
RGB: rgb(180 117 113)
HSL: hsl(4 31% 57%)
HWB: hwb(4 44% 29%)
OKLCH: oklch(0.627 0.08 23.6)
OKLab: oklab(0.627 0.074 0.032)
CIE Lab: lab(56 25.11 13)
LCH: lch(56 28.28 27.4)
CMYK: cmyk(0% 35% 37% 29%)

浅色调 · 深色调 · 灰色调

浅色调

BC827E
C4908C
CC9D9A
D4ABA8
DBB9B6
E3C6C4
EAD4D3
F1E2E1
F8F1F0

深色调

9C6561
855552
6E4643
583735
442927
301C1A
1D0F0E
0C0504
020101

灰色调

AF7673
AA7874
A57976
A07A77
9B7B79
967C7A
917D7C
8B7E7D
867F7F

配色和谐

互补色 +180°

B47571
Canyon Rose
44979E
≈ Sea Current

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 3.66:1 · APCA Lc 64

Fail

黑底

WCAG 5.72:1 · APCA Lc 38

最佳文字颜色: #000000

WCAG 5.72:1 (AA) · APCA Lc 38

Contrast pairs

代码片段

CSS

:root {
  --canyon-rose: #b47571;
  --canyon-rose-rgb: 180 117 113;
  --canyon-rose-oklch: oklch(0.627 0.08 23.6);
}

.element {
  color: var(--canyon-rose);
  background-color: hsl(4 31% 57%);
  border-color: oklch(0.627 0.08 23.6);
}

Tailwind CSS v4

@theme {
  --color-canyon-rose: #b47571;
  --color-canyon-rose-50: #ffede9;
  --color-canyon-rose-100: #ffdeda;
  --color-canyon-rose-200: #f5c8c3;
  --color-canyon-rose-300: #dea8a2;
  --color-canyon-rose-400: #ca8c88;
  --color-canyon-rose-500: #b5716c;
  --color-canyon-rose-600: #99605c;
  --color-canyon-rose-700: #7b4c49;
  --color-canyon-rose-800: #5b3736;
  --color-canyon-rose-900: #402625;
  --color-canyon-rose-950: #291413;
}

SCSS

$canyon-rose: #b47571;
$canyon-rose-rgb: 180, 117, 113;
$canyon-rose-light: mix(#fff, $canyon-rose, 20%);
$canyon-rose-dark: mix(#000, $canyon-rose, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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