命名颜色 · #FDDDE6

Fresh Piglet

Fresh Piglet 即 #FDDDE6：rgb(253 221 230)、hsl(343 89% 93%)、oklch(0.926 0.037 359)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Pink mean? → · Fresh Piglet color name →

#FDDDE6

oklch(0.926 0.037 359)

颜色转换

HEX: #fddde6
RGB: rgb(253 221 230)
HSL: hsl(343 89% 93%)
HWB: hwb(343 87% 1%)
OKLCH: oklch(0.926 0.037 359)
OKLab: oklab(0.926 0.037 -0.001)
CIE Lab: lab(91 12.49 -0.13)
LCH: lch(91 12.5 359.4)
CMYK: cmyk(0% 13% 9% 1%)

浅色调 · 深色调 · 灰色调

浅色调

FDE0E8
FEE4EB
FEE7ED
FEEBF0
FEEEF2
FFF1F5
FFF5F7
FFF8FA
FFFCFC

深色调

DCC0C8
BCA4AB
9D888E
7F6E73
625559
473D40
2D2628
161113
030203

灰色调

F0D3DB
E3CAD1
D6C0C6
C9B7BC
BDADB2
B0A4A7
A49B9D
989293
8C898A

配色和谐

互补色 +180°

FDDDE6
Fresh Piglet
CDEFE7
≈ Underwater

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.26:1 · APCA Lc 13

Fail

黑底

WCAG 16.66:1 · APCA Lc 91

AAA

最佳文字颜色: #000000

WCAG 16.66:1 (AAA) · APCA Lc 91

Contrast pairs

代码片段

CSS

:root {
  --fresh-piglet: #fddde6;
  --fresh-piglet-rgb: 253 221 230;
  --fresh-piglet-oklch: oklch(0.926 0.037 359);
}

.element {
  color: var(--fresh-piglet);
  background-color: hsl(343 89% 93%);
  border-color: oklch(0.926 0.037 359);
}

Tailwind CSS v4

@theme {
  --color-fresh-piglet: #fddde6;
  --color-fresh-piglet-50: #fff1f4;
  --color-fresh-piglet-100: #f3e3e7;
  --color-fresh-piglet-200: #e3ced3;
  --color-fresh-piglet-300: #c9b0b6;
  --color-fresh-piglet-400: #b2969e;
  --color-fresh-piglet-500: #9c7c85;
  --color-fresh-piglet-600: #846971;
  --color-fresh-piglet-700: #69545a;
  --color-fresh-piglet-800: #4d3d42;
  --color-fresh-piglet-900: #362a2e;
  --color-fresh-piglet-950: #21181b;
}

SCSS

$fresh-piglet: #fddde6;
$fresh-piglet-rgb: 253, 221, 230;
$fresh-piglet-light: mix(#fff, $fresh-piglet, 20%);
$fresh-piglet-dark: mix(#000, $fresh-piglet, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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