命名颜色 · #FACFCC

Fairy Tale Dream

Fairy Tale Dream 即 #FACFCC：rgb(250 207 204)、hsl(4 82% 89%)、oklch(0.891 0.049 22.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Pink mean? → · Fairy Tale Dream color name →

#FACFCC

oklch(0.891 0.049 22.8)

颜色转换

HEX: #facfcc
RGB: rgb(250 207 204)
HSL: hsl(4 82% 89%)
HWB: hwb(4 80% 2%)
OKLCH: oklch(0.891 0.049 22.8)
OKLab: oklab(0.891 0.045 0.019)
CIE Lab: lab(86.83 15.27 7.48)
LCH: lch(86.83 17 26.1)
CMYK: cmyk(0% 17% 18% 2%)

浅色调 · 深色调 · 灰色调

浅色调

FBD4D1
FBD9D6
FCDDDB
FDE2E0
FDE7E5
FEECEA
FEF1F0
FEF5F5
FFFAFA

深色调

D9B4B1
BA9997
9B7F7E
7D6765
614F4E
463837
2D2322
15100F
030202

灰色调

EDC7C4
E1BFBC
D4B7B5
C8AFAD
BCA7A5
AF9F9E
A39796
988F8F
8C8887

配色和谐

互补色 +180°

FACFCC
Fairy Tale Dream
B6E5E9
≈ Soaring Sky

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.41:1 · APCA Lc 20

Fail

黑底

WCAG 14.86:1 · APCA Lc 84

AAA

最佳文字颜色: #000000

WCAG 14.86:1 (AAA) · APCA Lc 84

Contrast pairs

代码片段

CSS

:root {
  --fairy-tale-dream: #facfcc;
  --fairy-tale-dream-rgb: 250 207 204;
  --fairy-tale-dream-oklch: oklch(0.891 0.049 22.8);
}

.element {
  color: var(--fairy-tale-dream);
  background-color: hsl(4 82% 89%);
  border-color: oklch(0.891 0.049 22.8);
}

Tailwind CSS v4

@theme {
  --color-fairy-tale-dream: #facfcc;
  --color-fairy-tale-dream-50: #fff0ee;
  --color-fairy-tale-dream-100: #f8e2e0;
  --color-fairy-tale-dream-200: #e9cdca;
  --color-fairy-tale-dream-300: #d0aeab;
  --color-fairy-tale-dream-400: #ba9491;
  --color-fairy-tale-dream-500: #a47a77;
  --color-fairy-tale-dream-600: #8b6765;
  --color-fairy-tale-dream-700: #6f5251;
  --color-fairy-tale-dream-800: #523c3b;
  --color-fairy-tale-dream-900: #392929;
  --color-fairy-tale-dream-950: #241716;
}

SCSS

$fairy-tale-dream: #facfcc;
$fairy-tale-dream-rgb: 250, 207, 204;
$fairy-tale-dream-light: mix(#fff, $fairy-tale-dream, 20%);
$fairy-tale-dream-dark: mix(#000, $fairy-tale-dream, 20%);

.element {
  color: $fairy-tale-dream;
  box-shadow: 0 0 0 2px rgba($fairy-tale-dream, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

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