色名 · #FFE690
Swallowtail
Swallowtailは#FFE690：rgb(255 230 144)、hsl(46 100% 78%)、oklch(0.927 0.109 93.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Swallowtail color name →
#FFE690
oklch(0.927 0.109 93.7)
カラー変換
- HEX
- #ffe690
- RGB
- rgb(255 230 144)
- HSL
- hsl(46 100% 78%)
- HWB
- hwb(46 56% 0%)
- OKLCH
- oklch(0.927 0.109 93.7)
- OKLab
- oklab(0.927 -0.007 0.109)
- CIE Lab
- lab(91.98 0.57 45.05)
- LCH
- lch(91.98 45.05 89.3)
- CMYK
- cmyk(0% 10% 44% 0%)
ティント · シェード · トーン
ティント
- FFE99C
- FFEBA8
- FFEEB4
- FFF1BF
- FFF3CA
- FFF6D5
- FFF8E0
- FFFAEA
- FFFDF5
シェード
- DEC87D
- BEAB6A
- 9E8E57
- 807345
- 635934
- 484024
- 2E2815
- 161307
- 030301
トーン
- F2DB90
- E4D18F
- D7C78E
- CABC8C
- BDB28B
- B1A889
- A49E87
- 989485
- 8C8A83
カラーハーモニー
補色 +180°
- FFE690
Swallowtail
- DFE6FF
≈ Lavender Mist
類似色 -30° +30°
- FFE690
Swallowtail
- FFE1C6
≈ Wild Maple
- D8F4A2
≈ Creamy Avocado
トライアド +120° +240°
- FFE690
Swallowtail
- BAF2FF
≈ Northrend
- FFDAF7
≈ Strawberry Frost
スプリットコンプリメンタリー +150° +210°
- FFE690
Swallowtail
- D2EAFF
≈ Veiling Waterfalls
- EDE0FF
≈ Lavender Savour
テトラード +90° +180° +270°
- FFE690
Swallowtail
- 8BFFEF
≈ Defence Matrix
- DFE6FF
≈ Lavender Mist
- FFDDE4
≈ Fresh Piglet
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.23:1 · APCA Lc 12
Ag
AAA黒の上
WCAG 16.97:1 · APCA Lc 92
最適な文字色: #000000
WCAG 16.97:1 (AAA) · APCA Lc 92
Contrast pairs
コードスニペット
CSS
:root {
--swallowtail: #ffe690;
--swallowtail-rgb: 255 230 144;
--swallowtail-oklch: oklch(0.927 0.109 93.7);
}
.element {
color: var(--swallowtail);
background-color: hsl(46 100% 78%);
border-color: oklch(0.927 0.109 93.7);
}Tailwind CSS v4
@theme {
--color-swallowtail: #ffe690;
--color-swallowtail-50: #fef6d3;
--color-swallowtail-100: #f3e8bf;
--color-swallowtail-200: #e2d59f;
--color-swallowtail-300: #c8b876;
--color-swallowtail-400: #b49d4d;
--color-swallowtail-500: #9e8418;
--color-swallowtail-600: #867019;
--color-swallowtail-700: #6b5914;
--color-swallowtail-800: #50410b;
--color-swallowtail-900: #382d07;
--color-swallowtail-950: #221900;
}SCSS
$swallowtail: #ffe690;
$swallowtail-rgb: 255, 230, 144;
$swallowtail-light: mix(#fff, $swallowtail, 20%);
$swallowtail-dark: mix(#000, $swallowtail, 20%);
.element {
color: $swallowtail;
box-shadow: 0 0 0 2px rgba($swallowtail, 0.35);
}