命名颜色 · #F8F8FF

Ghost White

Ghost White 即 #F8F8FF：rgb(248 248 255)、hsl(240 100% 99%)、oklch(0.981 0.009 286.2)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Gray mean? → · Ghost White color name →

#F8F8FF

oklch(0.981 0.009 286.2)

颜色转换

HEX: #f8f8ff
RGB: rgb(248 248 255)
HSL: hsl(240 100% 99%)
HWB: hwb(240 97% 0%)
OKLCH: oklch(0.981 0.009 286.2)
OKLab: oklab(0.981 0.003 -0.009)
CIE Lab: lab(97.73 0.93 -3.36)
LCH: lch(97.73 3.49 285.5)
CMYK: cmyk(3% 3% 0% 0%)

浅色调 · 深色调 · 灰色调

浅色调

F9F9FF
F9F9FF
FAFAFF
FBFBFF
FBFBFF
FCFCFF
FDFDFF
FEFEFF
FEFEFF

深色调

D8D8DE
B8B8BE
9A9A9E
7C7C80
606063
454548
2C2C2E
151516
030303

灰色调

EBEBF2
DFDFE4
D3D3D7
C6C6CA
BABABE
AEAEB1
A2A2A4
979798
8B8B8C

配色和谐

互补色 +180°

F8F8FF
Ghost White
F9F9F2
≈ Blanca Peak

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.05:1 · APCA Lc 0

Fail

黑底

WCAG 19.86:1 · APCA Lc 104

AAA

最佳文字颜色: #000000

WCAG 19.86:1 (AAA) · APCA Lc 104

Contrast pairs

代码片段

CSS

:root {
  --ghost-white: #f8f8ff;
  --ghost-white-rgb: 248 248 255;
  --ghost-white-oklch: oklch(0.981 0.009 286.2);
}

.element {
  color: var(--ghost-white);
  background-color: hsl(240 100% 99%);
  border-color: oklch(0.981 0.009 286.2);
}

Tailwind CSS v4

@theme {
  --color-ghost-white: #f8f8ff;
  --color-ghost-white-50: #f5f5f8;
  --color-ghost-white-100: #e7e7eb;
  --color-ghost-white-200: #d4d4d8;
  --color-ghost-white-300: #b7b7bc;
  --color-ghost-white-400: #9e9ea4;
  --color-ghost-white-500: #85858c;
  --color-ghost-white-600: #717177;
  --color-ghost-white-700: #5a5a5f;
  --color-ghost-white-800: #424246;
  --color-ghost-white-900: #2d2d30;
  --color-ghost-white-950: #1a1a1c;
}

SCSS

$ghost-white: #f8f8ff;
$ghost-white-rgb: 248, 248, 255;
$ghost-white-light: mix(#fff, $ghost-white, 20%);
$ghost-white-dark: mix(#000, $ghost-white, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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