命名颜色 · #FFD69F

Fuzzy Navel

Fuzzy Navel 即 #FFD69F：rgb(255 214 159)、hsl(34 100% 81%)、oklch(0.898 0.084 74.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Fuzzy Navel color name →

#FFD69F

oklch(0.898 0.084 74.5)

颜色转换

HEX: #ffd69f
RGB: rgb(255 214 159)
HSL: hsl(34 100% 81%)
HWB: hwb(34 62% 0%)
OKLCH: oklch(0.898 0.084 74.5)
OKLab: oklab(0.898 0.022 0.081)
CIE Lab: lab(88.24 9.43 32.84)
LCH: lch(88.24 34.17 74)
CMYK: cmyk(0% 16% 38% 0%)

浅色调 · 深色调 · 灰色调

浅色调

FFDAA9
FFDEB3
FFE3BD
FFE7C6
FFEBD0
FFEFD9
FFF3E3
FFF7EC
FFFBF6

深色调

DEBA8A
BE9E75
9E8461
806A4D
63523B
483B29
2E2518
161009
030201

灰色调

F2CD9C
E5C49A
D8BC97
CBB394
BEAA91
B1A28E
A5998A
989187
8C8884

配色和谐

互补色 +180°

FFD69F
Fuzzy Navel
C7E0FF
≈ Arc Light

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.36:1 · APCA Lc 18

Fail

黑底

WCAG 15.37:1 · APCA Lc 86

AAA

最佳文字颜色: #000000

WCAG 15.37:1 (AAA) · APCA Lc 86

Contrast pairs

代码片段

CSS

:root {
  --fuzzy-navel: #ffd69f;
  --fuzzy-navel-rgb: 255 214 159;
  --fuzzy-navel-oklch: oklch(0.898 0.084 74.5);
}

.element {
  color: var(--fuzzy-navel);
  background-color: hsl(34 100% 81%);
  border-color: oklch(0.898 0.084 74.5);
}

Tailwind CSS v4

@theme {
  --color-fuzzy-navel: #ffd69f;
  --color-fuzzy-navel-50: #fff3db;
  --color-fuzzy-navel-100: #f8e5c9;
  --color-fuzzy-navel-200: #e9d0ad;
  --color-fuzzy-navel-300: #d0b287;
  --color-fuzzy-navel-400: #bc9765;
  --color-fuzzy-navel-500: #a77e42;
  --color-fuzzy-navel-600: #8d6a39;
  --color-fuzzy-navel-700: #71552d;
  --color-fuzzy-navel-800: #543e20;
  --color-fuzzy-navel-900: #3b2a15;
  --color-fuzzy-navel-950: #251806;
}

SCSS

$fuzzy-navel: #ffd69f;
$fuzzy-navel-rgb: 255, 214, 159;
$fuzzy-navel-light: mix(#fff, $fuzzy-navel, 20%);
$fuzzy-navel-dark: mix(#000, $fuzzy-navel, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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