カラーセレクタ

Install app Share web page

カラーセレクタは、ユーザーが色を選択し、さまざまな形式(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