色名 · #DFA01A
Grapefruit Yellow
Grapefruit Yellowは#DFA01A：rgb(223 160 26)、hsl(41 79% 49%)、oklch(0.747 0.15 79.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Grapefruit Yellow color name →
#DFA01A
oklch(0.747 0.15 79.1)
カラー変換
- HEX
- #dfa01a
- RGB
- rgb(223 160 26)
- HSL
- hsl(41 79% 49%)
- HWB
- hwb(41 10% 13%)
- OKLCH
- oklch(0.747 0.15 79.1)
- OKLab
- oklab(0.747 0.028 0.147)
- CIE Lab
- lab(70.65 16.8 69.92)
- LCH
- lch(70.65 71.91 76.5)
- CMYK
- cmyk(0% 28% 88% 13%)
ティント · シェード · トーン
ティント
- E3AA42
- E6B45D
- EABD74
- EDC789
- F0D09E
- F3DAB1
- F6E3C5
- F9ECD8
- FCF6EC
シェード
- C28B15
- A57610
- 8A610C
- 6F4E07
- 563B04
- 3D2902
- 271901
- 120900
- 020100
トーン
- D59D33
- CC9A42
- C2974E
- B99458
- AF9160
- A68E68
- 9C8B6F
- 938775
- 89847B
カラーハーモニー
補色 +180°
- DFA01A
Grapefruit Yellow
- 7AAEFF
≈ Fennel Flower
類似色 -30° +30°
- DFA01A
Grapefruit Yellow
- F78D4F
≈ Blaze
- B5B42A
≈ Citronelle
トライアド +120° +240°
- DFA01A
Grapefruit Yellow
- 00C5CB
≈ Turquoise Surf
- D58CE9
≈ Bright Lilac
スプリットコンプリメンタリー +150° +210°
- DFA01A
Grapefruit Yellow
- 00BDF7
≈ Spiro Disco Ball
- AB9DFF
≈ Cobalite
テトラード +90° +180° +270°
- DFA01A
Grapefruit Yellow
- 00CB9D
≈ Caribbean Green
- 7AAEFF
≈ Fennel Flower
- F183BC
≈ Persian Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.28:1 · APCA Lc 45
Ag
AAA黒の上
WCAG 9.18:1 · APCA Lc 57
最適な文字色: #000000
WCAG 9.18:1 (AAA) · APCA Lc 57
Contrast pairs
コードスニペット
CSS
:root {
--grapefruit-yellow: #dfa01a;
--grapefruit-yellow-rgb: 223 160 26;
--grapefruit-yellow-oklch: oklch(0.747 0.15 79.1);
}
.element {
color: var(--grapefruit-yellow);
background-color: hsl(41 79% 49%);
border-color: oklch(0.747 0.15 79.1);
}Tailwind CSS v4
@theme {
--color-grapefruit-yellow: #dfa01a;
--color-grapefruit-yellow-50: #fff2c5;
--color-grapefruit-yellow-100: #ffe4af;
--color-grapefruit-yellow-200: #f5ce89;
--color-grapefruit-yellow-300: #deaf56;
--color-grapefruit-yellow-400: #cd9210;
--color-grapefruit-yellow-500: #ba7600;
--color-grapefruit-yellow-600: #9d6400;
--color-grapefruit-yellow-700: #7e5000;
--color-grapefruit-yellow-800: #5e3900;
--color-grapefruit-yellow-900: #422700;
--color-grapefruit-yellow-950: #2a1500;
}SCSS
$grapefruit-yellow: #dfa01a;
$grapefruit-yellow-rgb: 223, 160, 26;
$grapefruit-yellow-light: mix(#fff, $grapefruit-yellow, 20%);
$grapefruit-yellow-dark: mix(#000, $grapefruit-yellow, 20%);
.element {
color: $grapefruit-yellow;
box-shadow: 0 0 0 2px rgba($grapefruit-yellow, 0.35);
}