命名颜色 · #22FF00

Green Screen

Green Screen 即 #22FF00：rgb(34 255 0)、hsl(112 100% 50%)、oklch(0.868 0.292 142)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Green mean? → · Green Screen color name →

#22FF00

oklch(0.868 0.292 142)

颜色转换

HEX: #22ff00
RGB: rgb(34 255 0)
HSL: hsl(112 100% 50%)
HWB: hwb(112 0% 0%)
OKLCH: oklch(0.868 0.292 142)
OKLab: oklab(0.868 -0.23 0.18)
CIE Lab: lab(87.99 -77.8 81.22)
LCH: lch(87.99 112.47 133.8)
CMYK: cmyk(87% 0% 100% 0%)

浅色调 · 深色调 · 灰色调

浅色调

53FF45
71FF64
88FF7D
9DFF92
AFFFA6
C1FFB9
D1FFCB
E1FFDD
F0FFEE

深色调

1CDE00
16BE00
119E00
0B8000
076300
034800
012E00
001600
000300

灰色调

41F232
53E646
5FD954
68CC5F
6FC067
75B36E
79A674
7C9A79
7F8D7D

配色和谐

互补色 +180°

22FF00
Green Screen
F6BCFF
≈ Brilliant Lavender

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.36:1 · APCA Lc 17

Fail

黑底

WCAG 15.37:1 · APCA Lc 87

AAA

最佳文字颜色: #000000

WCAG 15.37:1 (AAA) · APCA Lc 87

Contrast pairs

代码片段

CSS

:root {
  --green-screen: #22ff00;
  --green-screen-rgb: 34 255 0;
  --green-screen-oklch: oklch(0.868 0.292 142);
}

.element {
  color: var(--green-screen);
  background-color: hsl(112 100% 50%);
  border-color: oklch(0.868 0.292 142);
}

Tailwind CSS v4

@theme {
  --color-green-screen: #22ff00;
  --color-green-screen-50: #c1ffc0;
  --color-green-screen-100: #a9ffa8;
  --color-green-screen-200: #7df47f;
  --color-green-screen-300: #33db43;
  --color-green-screen-400: #00c400;
  --color-green-screen-500: #00ad00;
  --color-green-screen-600: #009300;
  --color-green-screen-700: #007600;
  --color-green-screen-800: #005600;
  --color-green-screen-900: #003c00;
  --color-green-screen-950: #002600;
}

SCSS

$green-screen: #22ff00;
$green-screen-rgb: 34, 255, 0;
$green-screen-light: mix(#fff, $green-screen, 20%);
$green-screen-dark: mix(#000, $green-screen, 20%);

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

相近的命名颜色

在工具中打开

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