色名 · #FDEF02

Hudson Bee

Hudson Beeは#FDEF02：rgb(253 239 2)、hsl(57 98% 50%)、oklch(0.933 0.198 105.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Yellow mean? → · Hudson Bee color name →

#FDEF02

oklch(0.933 0.198 105.3)

カラー変換

HEX: #fdef02
RGB: rgb(253 239 2)
HSL: hsl(57 98% 50%)
HWB: hwb(57 1% 1%)
OKLCH: oklch(0.933 0.198 105.3)
OKLab: oklab(0.933 -0.052 0.191)
CIE Lab: lab(93.34 -9.25 90.23)
LCH: lch(93.34 90.7 95.9)
CMYK: cmyk(0% 6% 99% 1%)

ティント · シェード · トーン

ティント

FDF149
FDF368
FDF581
FDF796
FDF9AA
FDFABC
FEFCCD
FEFDDE
FEFEEF

シェード

DCD001
BCB101
9D9401
7F7800
625C00
474200
2D2A00
161400
030300

トーン

F0E435
E2D84A
D5CD58
C9C262
BCB76A
B0AC71
A3A176
97967A
8B8B7D

カラーハーモニー

補色 +180°

FDEF02
Hudson Bee
E6E6FF
≈ Lavender Mist

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 1.19:1 · APCA Lc 9

Fail

黒の上

WCAG 17.52:1 · APCA Lc 95

AAA

最適な文字色: #000000

WCAG 17.52:1 (AAA) · APCA Lc 95

Contrast pairs

コードスニペット

CSS

:root {
  --hudson-bee: #fdef02;
  --hudson-bee-rgb: 253 239 2;
  --hudson-bee-oklch: oklch(0.933 0.198 105.3);
}

.element {
  color: var(--hudson-bee);
  background-color: hsl(57 98% 50%);
  border-color: oklch(0.933 0.198 105.3);
}

Tailwind CSS v4

@theme {
  --color-hudson-bee: #fdef02;
  --color-hudson-bee-50: #fbfab8;
  --color-hudson-bee-100: #efed9f;
  --color-hudson-bee-200: #ddda70;
  --color-hudson-bee-300: #c3bd25;
  --color-hudson-bee-400: #b1a200;
  --color-hudson-bee-500: #9c8900;
  --color-hudson-bee-600: #847400;
  --color-hudson-bee-700: #695d00;
  --color-hudson-bee-800: #504300;
  --color-hudson-bee-900: #372e00;
  --color-hudson-bee-950: #221a00;
}

SCSS

$hudson-bee: #fdef02;
$hudson-bee-rgb: 253, 239, 2;
$hudson-bee-light: mix(#fff, $hudson-bee, 20%);
$hudson-bee-dark: mix(#000, $hudson-bee, 20%);

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

近い色名

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API