命名颜色 · #F2EDDD

Quarter Pearl Lusta

Quarter Pearl Lusta 即 #F2EDDD：rgb(242 237 221)、hsl(46 45% 91%)、oklch(0.946 0.022 92.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Quarter Pearl Lusta color name →

#F2EDDD

oklch(0.946 0.022 92.5)

颜色转换

HEX: #f2eddd
RGB: rgb(242 237 221)
HSL: hsl(46 45% 91%)
HWB: hwb(46 87% 5%)
OKLCH: oklch(0.946 0.022 92.5)
OKLab: oklab(0.946 -0.001 0.022)
CIE Lab: lab(93.82 -0.27 8.41)
LCH: lch(93.82 8.41 91.8)
CMYK: cmyk(0% 2% 9% 5%)

浅色调 · 深色调 · 灰色调

浅色调

F3EFE0
F5F1E4
F6F2E7
F7F4EB
F8F6EE
FAF8F1
FBFAF5
FCFBF8
FEFDFC

深色调

D2CEC0
B4B0A4
969388
79776E
5E5C55
43423D
2B2A26
141411
030302

灰色调

E6E2D3
DAD6CA
CECBC0
C3C0B7
B7B5AD
ACAAA4
A19F9B
969592
8B8A89

配色和谐

互补色 +180°

F2EDDD
Quarter Pearl Lusta
E8EDFC
≈ Brilliant White

类似色 -30° +30°

F2EDDD
Quarter Pearl Lusta
F8EADF
≈ Chardon
EAF0E0
≈ Clarity

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.17:1 · APCA Lc 8

Fail

黑底

WCAG 17.93:1 · APCA Lc 96

AAA

最佳文字颜色: #000000

WCAG 17.93:1 (AAA) · APCA Lc 96

Contrast pairs

代码片段

CSS

:root {
  --quarter-pearl-lusta: #f2eddd;
  --quarter-pearl-lusta-rgb: 242 237 221;
  --quarter-pearl-lusta-oklch: oklch(0.946 0.022 92.5);
}

.element {
  color: var(--quarter-pearl-lusta);
  background-color: hsl(46 45% 91%);
  border-color: oklch(0.946 0.022 92.5);
}

Tailwind CSS v4

@theme {
  --color-quarter-pearl-lusta: #f2eddd;
  --color-quarter-pearl-lusta-50: #f7f5ee;
  --color-quarter-pearl-lusta-100: #eae8e0;
  --color-quarter-pearl-lusta-200: #d7d4ca;
  --color-quarter-pearl-lusta-300: #bbb7ab;
  --color-quarter-pearl-lusta-400: #a39e90;
  --color-quarter-pearl-lusta-500: #8b8676;
  --color-quarter-pearl-lusta-600: #767164;
  --color-quarter-pearl-lusta-700: #5e5b50;
  --color-quarter-pearl-lusta-800: #45423a;
  --color-quarter-pearl-lusta-900: #302e28;
  --color-quarter-pearl-lusta-950: #1c1a16;
}

SCSS

$quarter-pearl-lusta: #f2eddd;
$quarter-pearl-lusta-rgb: 242, 237, 221;
$quarter-pearl-lusta-light: mix(#fff, $quarter-pearl-lusta, 20%);
$quarter-pearl-lusta-dark: mix(#000, $quarter-pearl-lusta, 20%);

.element {
  color: $quarter-pearl-lusta;
  box-shadow: 0 0 0 2px rgba($quarter-pearl-lusta, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

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