命名颜色 · #F5F1DE

Bumble Baby

Bumble Baby 即 #F5F1DE：rgb(245 241 222)、hsl(50 53% 92%)、oklch(0.956 0.025 97.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Bumble Baby color name →

#F5F1DE

oklch(0.956 0.025 97.1)

颜色转换

HEX: #f5f1de
RGB: rgb(245 241 222)
HSL: hsl(50 53% 92%)
HWB: hwb(50 87% 4%)
OKLCH: oklch(0.956 0.025 97.1)
OKLab: oklab(0.956 -0.003 0.025)
CIE Lab: lab(95.08 -0.98 9.71)
LCH: lch(95.08 9.76 95.8)
CMYK: cmyk(0% 2% 9% 4%)

浅色调 · 深色调 · 灰色调

浅色调

F6F2E1
F7F4E5
F8F5E8
F9F7EB
FAF8EF
FBF9F2
FCFBF5
FDFCF8
FEFEFC

深色调

D5D2C1
B6B3A5
989589
7B796F
5F5D55
44433D
2B2B26
151412
030302

灰色调

E9E5D4
DDD9CB
D0CEC1
C5C2B7
B9B7AE
ADACA5
A2A19B
969692
8B8B89

配色和谐

互补色 +180°

F5F1DE
Bumble Baby
EDF0FF
≈ Carte Blanche

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.13:1 · APCA Lc 0

Fail

黑底

WCAG 18.51:1 · APCA Lc 98

AAA

最佳文字颜色: #000000

WCAG 18.51:1 (AAA) · APCA Lc 98

Contrast pairs

代码片段

CSS

:root {
  --bumble-baby: #f5f1de;
  --bumble-baby-rgb: 245 241 222;
  --bumble-baby-oklch: oklch(0.956 0.025 97.1);
}

.element {
  color: var(--bumble-baby);
  background-color: hsl(50 53% 92%);
  border-color: oklch(0.956 0.025 97.1);
}

Tailwind CSS v4

@theme {
  --color-bumble-baby: #f5f1de;
  --color-bumble-baby-50: #f7f5ed;
  --color-bumble-baby-100: #eae8df;
  --color-bumble-baby-200: #d7d5c9;
  --color-bumble-baby-300: #bab8a9;
  --color-bumble-baby-400: #a29f8e;
  --color-bumble-baby-500: #8b8774;
  --color-bumble-baby-600: #757262;
  --color-bumble-baby-700: #5e5b4e;
  --color-bumble-baby-800: #454239;
  --color-bumble-baby-900: #302e27;
  --color-bumble-baby-950: #1c1b15;
}

SCSS

$bumble-baby: #f5f1de;
$bumble-baby-rgb: 245, 241, 222;
$bumble-baby-light: mix(#fff, $bumble-baby, 20%);
$bumble-baby-dark: mix(#000, $bumble-baby, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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