命名颜色 · #FFAA33

Bee Cluster

Bee Cluster 即 #FFAA33：rgb(255 170 51)、hsl(35 100% 60%)、oklch(0.803 0.159 69.8)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。

What does Orange mean? → · Bee Cluster color name →

#FFAA33

oklch(0.803 0.159 69.8)

颜色转换

HEX: #ffaa33
RGB: rgb(255 170 51)
HSL: hsl(35 100% 60%)
HWB: hwb(35 20% 0%)
OKLCH: oklch(0.803 0.159 69.8)
OKLab: oklab(0.803 0.055 0.149)
CIE Lab: lab(76.84 25.64 69.51)
LCH: lch(76.84 74.09 69.8)
CMYK: cmyk(0% 33% 80% 0%)

浅色调 · 深色调 · 灰色调

浅色调

FFB352
FFBC69
FFC57F
FFCD92
FFD6A5
FFDEB8
FFE7CA
FFEFDC
FFF7ED

深色调

DE932B
BE7D23
9E681C
805314
633F0D
482D07
2E1B03
160B01
030100

灰色调

F2A643
E5A24F
D89F59
CC9B61
BF9668
B2926E
A68E73
998978
8D857C

配色和谐

互补色 +180°

FFAA33
Bee Cluster
8BC4FF
≈ Chromis Damsel Blue

类似色 -30° +30°

三角配色 +120° +240°

分裂互补色 +150° +210°

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

对比度与无障碍

白底

WCAG 1.90:1 · APCA Lc 36

Fail

黑底

WCAG 11.04:1 · APCA Lc 67

AAA

最佳文字颜色: #000000

WCAG 11.04:1 (AAA) · APCA Lc 67

Contrast pairs

代码片段

CSS

:root {
  --bee-cluster: #ffaa33;
  --bee-cluster-rgb: 255 170 51;
  --bee-cluster-oklch: oklch(0.803 0.159 69.8);
}

.element {
  color: var(--bee-cluster);
  background-color: hsl(35 100% 60%);
  border-color: oklch(0.803 0.159 69.8);
}

Tailwind CSS v4

@theme {
  --color-bee-cluster: #ffaa33;
  --color-bee-cluster-50: #ffefc4;
  --color-bee-cluster-100: #ffe0ae;
  --color-bee-cluster-200: #ffc987;
  --color-bee-cluster-300: #e9a953;
  --color-bee-cluster-400: #d98b05;
  --color-bee-cluster-500: #c66d00;
  --color-bee-cluster-600: #a75d00;
  --color-bee-cluster-700: #874a00;
  --color-bee-cluster-800: #653500;
  --color-bee-cluster-900: #472400;
  --color-bee-cluster-950: #2e1200;
}

SCSS

$bee-cluster: #ffaa33;
$bee-cluster-rgb: 255, 170, 51;
$bee-cluster-light: mix(#fff, $bee-cluster, 20%);
$bee-cluster-dark: mix(#000, $bee-cluster, 20%);

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

相近的命名颜色

Palettes with similar colors

在工具中打开

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