色名 · #F4FF00
Busy Bee
Busy Beeは#F4FF00：rgb(244 255 0)、hsl(63 100% 50%)、oklch(0.959 0.214 112.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Busy Bee color name →
#F4FF00
oklch(0.959 0.214 112.9)
カラー変換
- HEX
- #f4ff00
- RGB
- rgb(244 255 0)
- HSL
- hsl(63 100% 50%)
- HWB
- hwb(63 0% 0%)
- OKLCH
- oklch(0.959 0.214 112.9)
- OKLab
- oklab(0.959 -0.083 0.197)
- CIE Lab
- lab(96.75 -20.17 92.32)
- LCH
- lch(96.75 94.5 102.3)
- CMYK
- cmyk(4% 0% 100% 0%)
ティント · シェード · トーン
ティント
- F5FF4A
- F5FF6A
- F6FF83
- F7FF98
- F8FFAC
- FAFFBE
- FBFFCF
- FCFFDF
- FDFFEF
シェード
- D4DE00
- B5BE00
- 979E00
- 7A8000
- 5E6300
- 444800
- 2B2E00
- 141600
- 030300
トーン
- E8F237
- DBE54B
- CFD859
- C3CB64
- B8BF6C
- ACB272
- A1A577
- 95997B
- 8B8C7E
カラーハーモニー
補色 +180°
- F4FF00
Busy Bee
- F2EFFF
≈ Foundation White
類似色 -30° +30°
- F4FF00
Busy Bee
- FFF0D4
≈ Candlestick Point
- D6FFD2
≈ Herbal Vapours
トライアド +120° +240°
- F4FF00
Busy Bee
- E3F5FF
≈ Kodama White
- FFECF3
≈ Fairy Wings
スプリットコンプリメンタリー +150° +210°
- F4FF00
Busy Bee
- EBF2FF
≈ Placebo Blue
- FDEBFF
≈ Fairy Bubblegum Cloud
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.09:1 · APCA Lc 0
Ag
AAA黒の上
WCAG 19.15:1 · APCA Lc 101
最適な文字色: #000000
WCAG 19.15:1 (AAA) · APCA Lc 101
Contrast pairs
コードスニペット
CSS
:root {
--busy-bee: #f4ff00;
--busy-bee-rgb: 244 255 0;
--busy-bee-oklch: oklch(0.959 0.214 112.9);
}
.element {
color: var(--busy-bee);
background-color: hsl(63 100% 50%);
border-color: oklch(0.959 0.214 112.9);
}Tailwind CSS v4
@theme {
--color-busy-bee: #f4ff00;
--color-busy-bee-50: #f3fdb6;
--color-busy-bee-100: #e5f19d;
--color-busy-bee-200: #d1df6e;
--color-busy-bee-300: #b5c31b;
--color-busy-bee-400: #a2a900;
--color-busy-bee-500: #8b9000;
--color-busy-bee-600: #767a00;
--color-busy-bee-700: #5e6100;
--color-busy-bee-800: #484600;
--color-busy-bee-900: #313100;
--color-busy-bee-950: #1e1d00;
}SCSS
$busy-bee: #f4ff00;
$busy-bee-rgb: 244, 255, 0;
$busy-bee-light: mix(#fff, $busy-bee, 20%);
$busy-bee-dark: mix(#000, $busy-bee, 20%);
.element {
color: $busy-bee;
box-shadow: 0 0 0 2px rgba($busy-bee, 0.35);
}