命名颜色 · #F7B768

Golden Cream

Golden Cream 即 #F7B768：rgb(247 183 104)、hsl(33 90% 69%)、oklch(0.823 0.121 70.5)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Golden Cream color name →

#F7B768

oklch(0.823 0.121 70.5)

颜色转换

HEX: #f7b768
RGB: rgb(247 183 104)
HSL: hsl(33 90% 69%)
HWB: hwb(33 41% 3%)
OKLCH: oklch(0.823 0.121 70.5)
OKLab: oklab(0.823 0.04 0.115)
CIE Lab: lab(79.32 17.84 49.12)
LCH: lch(79.32 52.26 70)
CMYK: cmyk(0% 26% 58% 3%)

浅色调 · 深色调 · 灰色调

浅色调

F8BE79
F9C689
FBCD99
FBD4A8
FCDCB7
FDE3C5
FEEAD4
FEF1E2
FFF8F1

深色调

D79F59
B7874B
99703E
7C5A30
604524
453118
2C1E0C
150C04
030200

灰色调

EBB26C
DFAC70
D3A773
C7A176
BB9C79
AF967B
A3917C
978B7E
8C867F

配色和谐

互补色 +180°

F7B768
Golden Cream
98CAFF
≈ Apocyan

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.76:1 · APCA Lc 32

Fail

黑底

WCAG 11.92:1 · APCA Lc 71

AAA

最佳文字颜色: #000000

WCAG 11.92:1 (AAA) · APCA Lc 71

Contrast pairs

代码片段

CSS

:root {
  --golden-cream: #f7b768;
  --golden-cream-rgb: 247 183 104;
  --golden-cream-oklch: oklch(0.823 0.121 70.5);
}

.element {
  color: var(--golden-cream);
  background-color: hsl(33 90% 69%);
  border-color: oklch(0.823 0.121 70.5);
}

Tailwind CSS v4

@theme {
  --color-golden-cream: #f7b768;
  --color-golden-cream-50: #fff0d0;
  --color-golden-cream-100: #ffe2bc;
  --color-golden-cream-200: #f5cd9b;
  --color-golden-cream-300: #deae70;
  --color-golden-cream-400: #cc9146;
  --color-golden-cream-500: #b87601;
  --color-golden-cream-600: #9b640b;
  --color-golden-cream-700: #7d500a;
  --color-golden-cream-800: #5d3906;
  --color-golden-cream-900: #412705;
  --color-golden-cream-950: #2a1500;
}

SCSS

$golden-cream: #f7b768;
$golden-cream-rgb: 247, 183, 104;
$golden-cream-light: mix(#fff, $golden-cream, 20%);
$golden-cream-dark: mix(#000, $golden-cream, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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