カラーセレクタは、ユーザーが色を選択し、さまざまな形式(HEX、RGB、HSL)カラーコードで確認できるテキストユーティリティです。
HEX、RGB、HSLコードの違い
カラーセレクタで最もよく使用されるカラーコード形式は、HEX、RGB、HSLです。それぞれの違いを理解すると、カラー操作がはるかに簡単になります。
HEX: 16進数で表現されたカラーコードで、Web開発で広く使用されています。例: #FF5733
。 HEXカラーコードの変換方法はセレクタによって自動的に提供されます。
RGB:赤(Red)、緑(Green)、青(Blue)の比率で色を表します。例: rgb(255, 87, 51)
。 RGBコードは、デジタル画面で色を表すのに適しています。
HSL:色相(Hue)、彩度(Saturation)、明るさ(Lightness)で構成され、直感的な色調整が可能です。例: hsl(10、100%、60%)
。 RGBとHSLの違いは、彩度と明るさの制御の容易さにあります。
カラーセレクタの主な機能
無料のカラーセレクタは、単純なカラー選択よりも幅広い機能を提供します。
HEX、RGB、HSL形式にカラーコードを変換
スウォッチを活用した頻繁に使用する色を保存
ユーザー設定可能なダーク/ライトテーマ
さまざまなカラーパレットの作成をサポート
WCAG基準に対する比率の確認
カラーセレクタの活用事例
カラーセレクタの使用例はさまざまです。ウェブデザインからグラフィック操作、UI/UXデザインまで幅広く使用されています。
ウェブデザイン:ウェブページの背景色、テキストの色、ボタンの色を設定するとき
グラフィックデザイン:ブランディング作業とロゴ作成で一貫した色を維持
UI / UXデザイン:ユーザーインターフェースのアクセシビリティを考慮したカラーコントラストチェック
たとえば、HSLベースのカラーパレットの作成を使用すると、シームレスなウェブデザインを簡単に実装できます。
HSLカラーパレット作成のヒント
HSLカラーパレットを使用すると、色のトーンの組み合わせをより簡単に管理できます。
基本色: hsl(200、80%、50%)
。
明るいトーン: hsl(200、80%、70%)
。
暗い色調: hsl(200、80%、30%)
。
このヒントは、 HEXとHSLの変換方法を理解するのに役立ちます。
アクセス性を考慮した色の選択
ウェブコンテンツのアクセシビリティを向上させるために、カラーセレクタは重要なツールです。特に色盲のユーザーと視覚的な問題を抱えているユーザーのために考慮すべき点がたくさんあります。
テキストと背景色の間の十分なコントラストを確認
WCAG 2.1のカラーコントラスト基準に準拠
色盲ユーザーも認識できる組み合わせを選択
アクセシビリティのための色の選択は、すべてのユーザーがウェブサイトを便利に利用できるようにします。
HTMLカラー名
青い系列
CadetBlue - #5F9EA0
SteelBlue - #4682B4
LightSteelBlue - #B0C4DE
LightBlue - #ADD8E6
PowderBlue - #B0E0E6
LightSkyBlue - #87CEFA
SkyBlue - #87CEEB
CornflowerBlue - #6495ED
DeepSkyBlue - #00BFFF
DodgerBlue - #1E90FF
RoyalBlue - #4169E1
Blue - #0000FF
MediumBlue - #0000CD
DarkBlue - #00008B
Navy - #000080
MidnightBlue - #191970
屋根系
Aqua - #00FFFF
Cyan - #00FFFF
LightCyan - #E0FFFF
PaleTurquoise - #AFEEEE
Aquamarine - #7FFFD4
Turquoise - #40E0D0
MediumTurquoise - #48D1CC
DarkTurquoise - #00CED1
茶色系列
Cornsilk - #FFF8DC
BlanchedAlmond - #FFEBCD
Bisque - #FFE4C4
NavajoWhite - #FFDEAD
Wheat - #F5DEB3
BurlyWood - #DEB887
Tan - #D2B48C
RosyBrown - #BC8F8F
SandyBrown - #F4A460
GoldenRod - #DAA520
DarkGoldenRod - #B8860B
Peru - #CD853F
Chocolate - #D2691E
Olive - #808000
SaddleBrown - #8B4513
Sienna - #A0522D
Brown - #A52A2A
Maroon - #800000
緑系列
GreenYellow - #ADFF2F
Chartreuse - #7FFF00
LawnGreen - #7CFC00
Lime - #00FF00
LimeGreen - #32CD32
PaleGreen - #98FB98
LightGreen - #90EE90
MediumSpringGreen - #00FA9A
SpringGreen - #00FF7F
MediumSeaGreen - #3CB371
SeaGreen - #2E8B57
ForestGreen - #228B22
Green - #008000
DarkGreen - #006400
YellowGreen - #9ACD32
OliveDrab - #6B8E23
DarkOliveGreen - #556B2F
MediumAquaMarine - #66CDAA
DarkSeaGreen - #8FBC8F
LightSeaGreen - #20B2AA
DarkCyan - #008B8B
Teal - #008080
グレー系列
Gainsboro - #DCDCDC
LightGray - #D3D3D3
Silver - #C0C0C0
DarkGray - #A9A9A9
DimGray - #696969
Gray - #808080
LightSlateGray - #778899
SlateGray - #708090
DarkSlateGray - #2F4F4F
Black - #000000
オレンジ系列
Orange - #FFA500
DarkOrange - #FF8C00
Coral - #FF7F50
Tomato - #FF6347
OrangeRed - #FF4500
黄色系列
Gold - #FFD700
Yellow - #FFFF00
LightYellow - #FFFFE0
LemonChiffon - #FFFACD
LightGoldenRodYellow - #FAFAD2
PapayaWhip - #FFEFD5
Moccasin - #FFE4B5
PeachPuff - #FFDAB9
PaleGoldenRod - #EEE8AA
Khaki - #F0E68C
DarkKhaki - #BDB76B
ピンク系列
Pink - #FFC0CB
LightPink - #FFB6C1
HotPink - #FF69B4
DeepPink - #FF1493
PaleVioletRed - #DB7093
MediumVioletRed - #C71585
紫系列
Lavender - #E6E6FA
Thistle - #D8BFD8
Plum - #DDA0DD
Orchid - #DA70D6
Violet - #EE82EE
Fuchsia - #FF00FF
Magenta - #FF00FF
MediumOrchid - #BA55D3
DarkOrchid - #9932CC
DarkViolet - #9400D3
BlueViolet - #8A2BE2
DarkMagenta - #8B008B
Purple - #800080
MediumPurple - #9370DB
MediumSlateBlue - #7B68EE
SlateBlue - #6A5ACD
DarkSlateBlue - #483D8B
RebeccaPurple - #663399
Indigo - #4B0082
赤系列
LightSalmon - #FFA07A
Salmon - #FA8072
DarkSalmon - #E9967A
LightCoral - #F08080
IndianRed - #CD5C5C
Crimson - #DC143C
Red - #FF0000
FireBrick - #B22222
DarkRed - #8B0000
白い系列
White - #FFFFFF
Snow - #FFFAFA
HoneyDew - #F0FFF0
MintCream - #F5FFFA
Azure - #F0FFFF
AliceBlue - #F0F8FF
GhostWhite - #F8F8FF
WhiteSmoke - #F5F5F5
SeaShell - #FFF5EE
Beige - #F5F5DC
OldLace - #FDF5E6
FloralWhite - #FFFAF0
Ivory - #FFFFF0
AntiqueWhite - #FAEBD7
Linen - #FAF0E6
LavenderBlush - #FFF0F5
MistyRose - #FFE4E1