命名颜色 · #FFFDF2

Granulated Sugar

Granulated Sugar 即 #FFFDF2：rgb(255 253 242)、hsl(51 100% 97%)、oklch(0.993 0.015 98.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Granulated Sugar color name →

#FFFDF2

oklch(0.993 0.015 98.3)

颜色转换

HEX: #fffdf2
RGB: rgb(255 253 242)
HSL: hsl(51 100% 97%)
HWB: hwb(51 95% 0%)
OKLCH: oklch(0.993 0.015 98.3)
OKLab: oklab(0.993 -0.002 0.014)
CIE Lab: lab(99.24 -0.71 5.53)
LCH: lch(99.24 5.57 97.3)
CMYK: cmyk(0% 1% 5% 0%)

浅色调 · 深色调 · 灰色调

浅色调

FFFDF3
FFFDF5
FFFEF6
FFFEF7
FFFEF9
FFFEFA
FFFEFB
FFFFFC
FFFFFE

深色调

DEDCD2
BEBCB4
9E9D96
807F79
63625E
484743
2E2D2B
161614
030303

灰色调

F2F0E6
E4E3DA
D7D6CE
CAC9C3
BDBDB7
B1B0AC
A4A4A1
989896
8C8C8B

配色和谐

互补色 +180°

FFFDF2
Granulated Sugar
FCFCFF
≈ Pale Grey

类似色 -30° +30°

FFFDF2
Granulated Sugar
FFFCF9
≈ Eyeball
FAFFF4
≈ Milk

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.02:1 · APCA Lc 0

Fail

黑底

WCAG 20.58:1 · APCA Lc 106

AAA

最佳文字颜色: #000000

WCAG 20.58:1 (AAA) · APCA Lc 106

Contrast pairs

代码片段

CSS

:root {
  --granulated-sugar: #fffdf2;
  --granulated-sugar-rgb: 255 253 242;
  --granulated-sugar-oklch: oklch(0.993 0.015 98.3);
}

.element {
  color: var(--granulated-sugar);
  background-color: hsl(51 100% 97%);
  border-color: oklch(0.993 0.015 98.3);
}

Tailwind CSS v4

@theme {
  --color-granulated-sugar: #fffdf2;
  --color-granulated-sugar-50: #f6f5f1;
  --color-granulated-sugar-100: #e9e8e3;
  --color-granulated-sugar-200: #d5d4cd;
  --color-granulated-sugar-300: #b9b8af;
  --color-granulated-sugar-400: #a09f95;
  --color-granulated-sugar-500: #88867c;
  --color-granulated-sugar-600: #737269;
  --color-granulated-sugar-700: #5c5b54;
  --color-granulated-sugar-800: #44423d;
  --color-granulated-sugar-900: #2f2e2a;
  --color-granulated-sugar-950: #1b1b17;
}

SCSS

$granulated-sugar: #fffdf2;
$granulated-sugar-rgb: 255, 253, 242;
$granulated-sugar-light: mix(#fff, $granulated-sugar, 20%);
$granulated-sugar-dark: mix(#000, $granulated-sugar, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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