命名颜色 · #FFDDBB

Christmas Rose

Christmas Rose 即 #FFDDBB：rgb(255 221 187)、hsl(30 100% 87%)、oklch(0.917 0.059 67)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Christmas Rose color name →

#FFDDBB

oklch(0.917 0.059 67)

颜色转换

HEX: #ffddbb
RGB: rgb(255 221 187)
HSL: hsl(30 100% 87%)
HWB: hwb(30 73% 0%)
OKLCH: oklch(0.917 0.059 67)
OKLab: oklab(0.917 0.023 0.054)
CIE Lab: lab(90.37 8.52 21.33)
LCH: lch(90.37 22.97 68.2)
CMYK: cmyk(0% 13% 27% 0%)

浅色调 · 深色调 · 灰色调

浅色调

FFE0C2
FFE4C9
FFE7D0
FFEBD6
FFEEDD
FFF2E4
FFF5EB
FFF8F1
FFFCF8

深色调

DEC0A2
BEA48A
9E8873
806E5C
635546
483D32
2E261F
16110D
030202

灰色调

F2D3B5
E5CAAF
D7C0A9
CBB7A3
BEAE9D
B1A498
A59B92
98928C
8C8986

配色和谐

互补色 +180°

FFDDBB
Christmas Rose
CEE7FF
≈ Veiling Waterfalls

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.28:1 · APCA Lc 14

Fail

黑底

WCAG 16.31:1 · APCA Lc 90

AAA

最佳文字颜色: #000000

WCAG 16.31:1 (AAA) · APCA Lc 90

Contrast pairs

代码片段

CSS

:root {
  --christmas-rose: #ffddbb;
  --christmas-rose-rgb: 255 221 187;
  --christmas-rose-oklch: oklch(0.917 0.059 67);
}

.element {
  color: var(--christmas-rose);
  background-color: hsl(30 100% 87%);
  border-color: oklch(0.917 0.059 67);
}

Tailwind CSS v4

@theme {
  --color-christmas-rose: #ffddbb;
  --color-christmas-rose-50: #fff3e4;
  --color-christmas-rose-100: #f5e5d4;
  --color-christmas-rose-200: #e5d0ba;
  --color-christmas-rose-300: #ccb398;
  --color-christmas-rose-400: #b6987a;
  --color-christmas-rose-500: #a17f5c;
  --color-christmas-rose-600: #886b4e;
  --color-christmas-rose-700: #6d563e;
  --color-christmas-rose-800: #513e2d;
  --color-christmas-rose-900: #382b1e;
  --color-christmas-rose-950: #23180e;
}

SCSS

$christmas-rose: #ffddbb;
$christmas-rose-rgb: 255, 221, 187;
$christmas-rose-light: mix(#fff, $christmas-rose, 20%);
$christmas-rose-dark: mix(#000, $christmas-rose, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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