命名颜色 · #3FBBB2

Magnetic Magic

Magnetic Magic 即 #3FBBB2：rgb(63 187 178)、hsl(176 50% 49%)、oklch(0.722 0.108 188.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Teal mean? → · Magnetic Magic color name →

#3FBBB2

oklch(0.722 0.108 188.1)

颜色转换

HEX: #3fbbb2
RGB: rgb(63 187 178)
HSL: hsl(176 50% 49%)
HWB: hwb(176 25% 27%)
OKLCH: oklch(0.722 0.108 188.1)
OKLab: oklab(0.722 -0.107 -0.015)
CIE Lab: lab(69.06 -36.83 -5.99)
LCH: lch(69.06 37.31 189.2)
CMYK: cmyk(66% 0% 5% 27%)

浅色调 · 深色调 · 灰色调

浅色调

5AC2B9
70C9C1
84D0C9
97D7D0
A9DDD8
BBE4E0
CCEBE7
DDF2EF
EEF8F7

深色调

35A29A
2C8A83
23736D
1B5C57
124643
0A322F
041F1D
010D0C
000201

灰色调

4CB5AD
56AFA8
5EA9A3
66A49E
6C9E99
719894
75928F
798C8A
7D8685

配色和谐

互补色 +180°

3FBBB2
Magnetic Magic
DF8898
≈ Melancholy

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 2.34:1 · APCA Lc 46

Fail

黑底

WCAG 8.96:1 · APCA Lc 56

AAA

最佳文字颜色: #000000

WCAG 8.96:1 (AAA) · APCA Lc 56

Contrast pairs

代码片段

CSS

:root {
  --magnetic-magic: #3fbbb2;
  --magnetic-magic-rgb: 63 187 178;
  --magnetic-magic-oklch: oklch(0.722 0.108 188.1);
}

.element {
  color: var(--magnetic-magic);
  background-color: hsl(176 50% 49%);
  border-color: oklch(0.722 0.108 188.1);
}

Tailwind CSS v4

@theme {
  --color-magnetic-magic: #3fbbb2;
  --color-magnetic-magic-50: #d3fffc;
  --color-magnetic-magic-100: #bff4f0;
  --color-magnetic-magic-200: #9ee4de;
  --color-magnetic-magic-300: #70c9c4;
  --color-magnetic-magic-400: #40b3aa;
  --color-magnetic-magic-500: #009c94;
  --color-magnetic-magic-600: #00847d;
  --color-magnetic-magic-700: #006a64;
  --color-magnetic-magic-800: #004e48;
  --color-magnetic-magic-900: #003632;
  --color-magnetic-magic-950: #00211e;
}

SCSS

$magnetic-magic: #3fbbb2;
$magnetic-magic-rgb: 63, 187, 178;
$magnetic-magic-light: mix(#fff, $magnetic-magic, 20%);
$magnetic-magic-dark: mix(#000, $magnetic-magic, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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