命名颜色 · #FFEDBC

Sun-Kissed Sands

Sun-Kissed Sands 即 #FFEDBC：rgb(255 237 188)、hsl(44 100% 87%)、oklch(0.949 0.066 90.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Yellow mean? → · Sun-Kissed Sands color name →

#FFEDBC

oklch(0.949 0.066 90.3)

颜色转换

HEX: #ffedbc
RGB: rgb(255 237 188)
HSL: hsl(44 100% 87%)
HWB: hwb(44 74% 0%)
OKLCH: oklch(0.949 0.066 90.3)
OKLab: oklab(0.949 0 0.066)
CIE Lab: lab(94.32 0.92 26.16)
LCH: lch(94.32 26.18 88)
CMYK: cmyk(0% 7% 26% 0%)

浅色调 · 深色调 · 灰色调

浅色调

FFEFC3
FFF1CA
FFF3D1
FFF4D7
FFF6DE
FFF8E5
FFFAEB
FFFCF2
FFFDF8

深色调

DECEA3
BEB08B
9E9373
80775D
635C47
484232
2E2A1F
16140D
030302

灰色调

F2E2B6
E4D6B0
D7CBAA
CAC0A4
BEB59E
B1AA98
A4A092
98958C
8C8A86

配色和谐

互补色 +180°

FFEDBC
Sun-Kissed Sands
E8EEFF
≈ Brilliant White

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.16:1 · APCA Lc 8

Fail

黑底

WCAG 18.09:1 · APCA Lc 97

AAA

最佳文字颜色: #000000

WCAG 18.09:1 (AAA) · APCA Lc 97

Contrast pairs

代码片段

CSS

:root {
  --sun-kissed-sands: #ffedbc;
  --sun-kissed-sands-rgb: 255 237 188;
  --sun-kissed-sands-oklch: oklch(0.949 0.066 90.3);
}

.element {
  color: var(--sun-kissed-sands);
  background-color: hsl(44 100% 87%);
  border-color: oklch(0.949 0.066 90.3);
}

Tailwind CSS v4

@theme {
  --color-sun-kissed-sands: #ffedbc;
  --color-sun-kissed-sands-50: #fcf5e0;
  --color-sun-kissed-sands-100: #efe8d0;
  --color-sun-kissed-sands-200: #ded4b5;
  --color-sun-kissed-sands-300: #c3b791;
  --color-sun-kissed-sands-400: #ad9d71;
  --color-sun-kissed-sands-500: #978552;
  --color-sun-kissed-sands-600: #807046;
  --color-sun-kissed-sands-700: #665a37;
  --color-sun-kissed-sands-800: #4c4127;
  --color-sun-kissed-sands-900: #352d1a;
  --color-sun-kissed-sands-950: #201a0b;
}

SCSS

$sun-kissed-sands: #ffedbc;
$sun-kissed-sands-rgb: 255, 237, 188;
$sun-kissed-sands-light: mix(#fff, $sun-kissed-sands, 20%);
$sun-kissed-sands-dark: mix(#000, $sun-kissed-sands, 20%);

.element {
  color: $sun-kissed-sands;
  box-shadow: 0 0 0 2px rgba($sun-kissed-sands, 0.35);
}

相近的命名颜色

Palettes with similar colors

在工具中打开

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