命名颜色 · #40465D

Bella Sera

Bella Sera 即 #40465D：rgb(64 70 93)、hsl(228 18% 31%)、oklch(0.398 0.04 273.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Blue mean? → · Bella Sera color name →

#40465D

oklch(0.398 0.04 273.1)

颜色转换

HEX: #40465d
RGB: rgb(64 70 93)
HSL: hsl(228 18% 31%)
HWB: hwb(228 25% 64%)
OKLCH: oklch(0.398 0.04 273.1)
OKLab: oklab(0.398 0.002 -0.04)
CIE Lab: lab(29.9 2.04 -14.56)
LCH: lch(29.9 14.7 278)
CMYK: cmyk(31% 25% 0% 64%)

浅色调 · 深色调 · 灰色调

浅色调

51576C
62687B
74798B
878B9B
9A9EAB
ADB0BB
C1C4CC
D5D7DD
EAEBEE

深色调

363C50
2D3243
242837
1B1E2A
13151F
0B0D14
05050A
010203
000000

灰色调

464C61
4C5164
525768
595D6B
5F626F
656872
6C6E76
737479
797A7D

配色和谐

互补色 +180°

40465D
Bella Sera
4E472E
≈ Tinny Tin

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 9.32:1 · APCA Lc 92

AAA

黑底

WCAG 2.25:1 · APCA Lc 11

Fail

最佳文字颜色: #FFFFFF

WCAG 9.32:1 (AAA) · APCA Lc 92

Contrast pairs

代码片段

CSS

:root {
  --bella-sera: #40465d;
  --bella-sera-rgb: 64 70 93;
  --bella-sera-oklch: oklch(0.398 0.04 273.1);
}

.element {
  color: var(--bella-sera);
  background-color: hsl(228 18% 31%);
  border-color: oklch(0.398 0.04 273.1);
}

Tailwind CSS v4

@theme {
  --color-bella-sera: #40465d;
  --color-bella-sera-50: #f1f5ff;
  --color-bella-sera-100: #e4e7f6;
  --color-bella-sera-200: #cfd3e6;
  --color-bella-sera-300: #b1b6cc;
  --color-bella-sera-400: #969db7;
  --color-bella-sera-500: #7d85a1;
  --color-bella-sera-600: #6a7088;
  --color-bella-sera-700: #555a6d;
  --color-bella-sera-800: #3d4250;
  --color-bella-sera-900: #2a2d38;
  --color-bella-sera-950: #181a23;
}

SCSS

$bella-sera: #40465d;
$bella-sera-rgb: 64, 70, 93;
$bella-sera-light: mix(#fff, $bella-sera, 20%);
$bella-sera-dark: mix(#000, $bella-sera, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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