命名颜色 · #B7E1A1

Basil Smash

Basil Smash 即 #B7E1A1：rgb(183 225 161)、hsl(99 52% 76%)、oklch(0.864 0.096 135.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Green mean? → · Basil Smash color name →

#B7E1A1

oklch(0.864 0.096 135.1)

颜色转换

HEX: #b7e1a1
RGB: rgb(183 225 161)
HSL: hsl(99 52% 76%)
HWB: hwb(99 63% 12%)
OKLCH: oklch(0.864 0.096 135.1)
OKLab: oklab(0.864 -0.068 0.068)
CIE Lab: lab(85.34 -22.78 26.75)
LCH: lch(85.34 35.13 130.4)
CMYK: cmyk(19% 0% 28% 12%)

浅色调 · 深色调 · 灰色调

浅色调

BEE4AB
C5E7B4
CDEABE
D4EDC7
DBF0D0
E2F3DA
E9F6E3
F1F9EC
F8FCF6

深色调

9FC48B
87A776
708B62
5A704E
45563C
313E2A
1E2719
0C1209
020201

灰色调

B1D79E
ACCD9B
A6C398
A1B995
9BB091
96A68E
909C8B
8B9387
858984

配色和谐

互补色 +180°

B7E1A1
Basil Smash
EBBFFE
≈ Light Lavender

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.46:1 · APCA Lc 22

Fail

黑底

WCAG 14.29:1 · APCA Lc 81

AAA

最佳文字颜色: #000000

WCAG 14.29:1 (AAA) · APCA Lc 81

Contrast pairs

代码片段

CSS

:root {
  --basil-smash: #b7e1a1;
  --basil-smash-rgb: 183 225 161;
  --basil-smash-oklch: oklch(0.864 0.096 135.1);
}

.element {
  color: var(--basil-smash);
  background-color: hsl(99 52% 76%);
  border-color: oklch(0.864 0.096 135.1);
}

Tailwind CSS v4

@theme {
  --color-basil-smash: #b7e1a1;
  --color-basil-smash-50: #e9fce1;
  --color-basil-smash-100: #d9f0d1;
  --color-basil-smash-200: #c1deb6;
  --color-basil-smash-300: #a0c393;
  --color-basil-smash-400: #86ab71;
  --color-basil-smash-500: #6a9451;
  --color-basil-smash-600: #5a7e46;
  --color-basil-smash-700: #476537;
  --color-basil-smash-800: #354a26;
  --color-basil-smash-900: #243319;
  --color-basil-smash-950: #131f0a;
}

SCSS

$basil-smash: #b7e1a1;
$basil-smash-rgb: 183, 225, 161;
$basil-smash-light: mix(#fff, $basil-smash, 20%);
$basil-smash-dark: mix(#000, $basil-smash, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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