色名 · #C4BF33
Pyrite Yellow
Pyrite Yellowは#C4BF33：rgb(196 191 51)、hsl(58 59% 48%)、oklch(0.785 0.153 107.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Pyrite Yellow color name →
#C4BF33
oklch(0.785 0.153 107.4)
カラー変換
- HEX
- #c4bf33
- RGB
- rgb(196 191 51)
- HSL
- hsl(58 59% 48%)
- HWB
- hwb(58 20% 23%)
- OKLCH
- oklch(0.785 0.153 107.4)
- OKLab
- oklab(0.785 -0.046 0.146)
- CIE Lab
- lab(75.97 -9.7 65.96)
- LCH
- lch(75.97 66.67 98.4)
- CMYK
- cmyk(0% 3% 74% 23%)
ティント · シェード · トーン
ティント
- CAC651
- CFCC69
- D5D37E
- DBD992
- E0E0A5
- E6E6B7
- ECECC9
- F3F3DB
- F9F9ED
シェード
- AAA62B
- 918D23
- 78751C
- 615E14
- 4A480D
- 353307
- 211F03
- 0E0D01
- 020200
トーン
- BDB943
- B6B34F
- AFAC58
- A8A660
- A1A067
- 9A9A6D
- 939373
- 8D8D78
- 86867C
カラーハーモニー
補色 +180°
- C4BF33
Pyrite Yellow
- B4ADFF
≈ Winterspring Lilac
類似色 -30° +30°
- C4BF33
Pyrite Yellow
- EFAA2A
≈ Apricot Glazed Chicken
- 87CF6A
≈ Bright Lettuce
トライアド +120° +240°
- C4BF33
Pyrite Yellow
- 31CAFF
≈ Vivid Sky Blue
- FF8ECB
≈ Shimmering Love
スプリットコンプリメンタリー +150° +210°
- C4BF33
Pyrite Yellow
- 8CBBFF
≈ Scenic Water
- E198F9
≈ Medium Lavender Magenta
テトラード +90° +180° +270°
- C4BF33
Pyrite Yellow
- 00D2D7
≈ Jade Glass
- B4ADFF
≈ Winterspring Lilac
- FF969B
≈ Mad Pinker
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.93:1 · APCA Lc 37
Ag
AAA黒の上
WCAG 10.84:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.84:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--pyrite-yellow: #c4bf33;
--pyrite-yellow-rgb: 196 191 51;
--pyrite-yellow-oklch: oklch(0.785 0.153 107.4);
}
.element {
color: var(--pyrite-yellow);
background-color: hsl(58 59% 48%);
border-color: oklch(0.785 0.153 107.4);
}Tailwind CSS v4
@theme {
--color-pyrite-yellow: #c4bf33;
--color-pyrite-yellow-50: #f8fac7;
--color-pyrite-yellow-100: #ebedb2;
--color-pyrite-yellow-200: #d9da8c;
--color-pyrite-yellow-300: #bdbe5b;
--color-pyrite-yellow-400: #a9a417;
--color-pyrite-yellow-500: #938b00;
--color-pyrite-yellow-600: #7c7600;
--color-pyrite-yellow-700: #635e00;
--color-pyrite-yellow-800: #4b4400;
--color-pyrite-yellow-900: #342f00;
--color-pyrite-yellow-950: #1f1b00;
}SCSS
$pyrite-yellow: #c4bf33;
$pyrite-yellow-rgb: 196, 191, 51;
$pyrite-yellow-light: mix(#fff, $pyrite-yellow, 20%);
$pyrite-yellow-dark: mix(#000, $pyrite-yellow, 20%);
.element {
color: $pyrite-yellow;
box-shadow: 0 0 0 2px rgba($pyrite-yellow, 0.35);
}