Click to Exit Full Screen

Ext. Dictionary

Dictionary: Color Library

設定

大文字・小文字の設定

カンマ後スペースの設定

注意

閲覧環境によっては、表示される色が適切に表示されない場合があります。

CSS 色キーワード

色サンプル / 色の名前 16進数カラーコード
black #000000
silver #c0c0c0
gray #808080
white #ffffff
maroon #800000
red #ff0000
purple #800080
fuchsia #ff00ff
green #008000
lime #00ff00
olive #808000
yellow #ffff00
navy #000080
blue #0000ff
teal #008080
aqua #00ffff
orange #ffa500
aliceblue #f0f8ff
antiquewhite #faebd7
aquamarine #7fffd4
azure #f0ffff
beige #f5f5dc
bisque #ffe4c4
blanchedalmond #ffebcd
blueviolet #8a2be2
brown #a52a2a
burlywood #deb887
cadetblue #5f9ea0
chartreuse #7fff00
chocolate #d2691e
coral #ff7f50
cornflowerblue #6495ed
cornsilk #fff8dc
crimson #dc143c
cyan #00ffff
darkblue #00008b
darkcyan #008b8b
darkgoldenrod #b8860b
darkgray #a9a9a9
darkgreen #006400
darkgrey #a9a9a9
darkkhaki #bdb76b
darkmagenta #8b008b
darkolivegreen #556b2f
darkorange #ff8c00
darkorchid #9932cc
darkred #8b0000
darksalmon #e9967a
darkseagreen #8fbc8f
darkslateblue #483d8b
darkslategray #2f4f4f
darkslategrey #2f4f4f
darkturquoise #00ced1
darkviolet #9400d3
deeppink #ff1493
deepskyblue #00bfff
dimgray #696969
dimgrey #696969
dodgerblue #1e90ff
firebrick #b22222
floralwhite #fffaf0
forestgreen #228b22
gainsboro #dcdcdc
ghostwhite #f8f8ff
gold #ffd700
goldenrod #daa520
greenyellow #adff2f
grey #808080
honeydew #f0fff0
hotpink #ff69b4
indianred #cd5c5c
indigo #4b0082
ivory #fffff0
khaki #f0e68c
lavender #e6e6fa
lavenderblush #fff0f5
lawngreen #7cfc00
lemonchiffon #fffacd
lightblue #add8e6
lightcoral #f08080
lightcyan #e0ffff
lightgoldenrodyellow #fafad2
lightgray #d3d3d3
lightgreen #90ee90
lightgrey #d3d3d3
lightpink #ffb6c1
lightsalmon #ffa07a
lightseagreen #20b2aa
lightskyblue #87cefa
lightslategray #778899
lightslategrey #778899
lightsteelblue #b0c4de
lightyellow #ffffe0
limegreen #32cd32
linen #faf0e6
magenta #ff00ff
mediumaquamarine #66cdaa
mediumblue #0000cd
mediumorchid #ba55d3
mediumpurple #9370db
mediumseagreen #3cb371
mediumslateblue #7b68ee
mediumspringgreen #00fa9a
mediumturquoise #48d1cc
mediumvioletred #c71585
midnightblue #191970
mintcream #f5fffa
mistyrose #ffe4e1
moccasin #ffe4b5
navajowhite #ffdead
oldlace #fdf5e6
olivedrab #6b8e23
orangered #ff4500
orchid #da70d6
palegoldenrod #eee8aa
palegreen #98fb98
paleturquoise #afeeee
palevioletred #db7093
papayawhip #ffefd5
peachpuff #ffdab9
peru #cd853f
pink #ffc0cb
plum #dda0dd
powderblue #b0e0e6
rosybrown #bc8f8f
royalblue #4169e1
saddlebrown #8b4513
salmon #fa8072
sandybrown #f4a460
seagreen #2e8b57
seashell #fff5ee
sienna #a0522d
skyblue #87ceeb
slateblue #6a5acd
slategray #708090
slategrey #708090
snow #fffafa
springgreen #00ff7f
steelblue #4682b4
tan #d2b48c
thistle #d8bfd8
tomato #ff6347
turquoise #40e0d0
violet #ee82ee
wheat #f5deb3
whitesmoke #f5f5f5
yellowgreen #9acd32
rebeccapurple #663399

Apple System Colors

色サンプル / 色の名前 16進数カラーコード
Blue (Light) #007aff
Blue (Dark) #0a84ff
Green (Light) #34c759
Green (Dark) #30d158
Indigo (Light) #5856d6
Indigo (Dark) #5e5ce6
Orange (Light) #ff9500
Orange (Dark) #ff9f0a
Pink (Light) #ff2d55
Pink (Dark) #ff375f
Purple (Light) #af52de
Purple (Dark) #bf5af2
Red (Light) #ff3b30
Red (Dark) #ff453a
Teal (Light) #5ac8fa
Teal (Dark) #64d2ff
Yellow (Light) #fc0
Yellow (Dark) #ffd60a
Gray (Light) #8e8e93
Gray (Dark) #8e8e93
Gray2 (Light) #aeaeb2
Gray2 (Dark) #636366
Gray3 (Light) #c7c7cc
Gray3 (Dark) #48484a
Gray4 (Light) #d1d1d6
Gray4 (Dark) #3a3a3c
Gray5 (Light) #e5e5ea
Gray5 (Dark) #2c2c2e
Gray6 (Light) #f2f2f7
Gray6 (Dark) #1c1c1e

Accessible

色サンプル / 色の名前 16進数カラーコード
Blue (Light) #0040dd
Blue (Dark) #409cff
Green (Light) #248a3d
Green (Dark) #30db5b
Indigo (Light) #3634a3
Indigo (Dark) #7d7aff
Orange (Light) #c93400
Orange (Dark) #ffb340
Pink (Light) #d30f45
Pink (Dark) #ff6482
Purple (Light) #8944ab
Purple (Dark) #da8fff
Red (Light) #d70015
Red (Dark) #ff6961
Teal (Light) #0071a4
Teal (Dark) #70d7ff
Yellow (Light) #b25000
Yellow (Dark) #ffd426
Gray (Light) #6c6c70
Gray (Dark) #aeaeb2
Gray2 (Light) #8e8e93
Gray2 (Dark) #7c7c80
Gray3 (Light) #aeaeb2
Gray3 (Dark) #545456
Gray4 (Light) #bcbcc0
Gray4 (Dark) #444446
Gray5 (Light) #d8d8dc
Gray5 (Dark) #363638
Gray6 (Light) #ebebf0
Gray6 (Dark) #242426

Bootstrap 4

色サンプル / 色の名前 16進数カラーコード
Blue #007bff
Indigo #6610f2
Purple #6f42c1
Pink #e83e8c
Red #dc3545
Orange #fd7e14
Yellow #ffc107
Green #28a745
Teal #20c997
Cyan #17a2b8
White #fff
Gray #6c757d
Gray Dark #343a40
Primary #007bff
Secondary #6c757d
Success #28a745
Info #17a2b8
Warning #ffc107
Danger #dc3545
Light #f8f9fa
Dark #343a40

Bootstrap 5

色サンプル / 色の名前 16進数カラーコード
Blue #0d6efd
Indigo #6610f2
Purple #6f42c1
Pink #d63384
Red #dc3545
Orange #fd7e14
Yellow #ffc107
Green #28a745
Teal #20c997
Cyan #17a2b8
White #fff
Gray #6c757d
Gray Dark #343a40
Primary #0d6efd
Secondary #6c757d
Success #28a745
Info #17a2b8
Warning #ffc107
Danger #dc3545
Light #f8f9fa
Dark #343a40

Material Design (Google)

Red

色サンプル / 色の名前 16進数カラーコード
Red 50 #ffebee
Red 100 #ffcdd2
Red 200 #ef9a9a
Red 300 #e57373
Red 400 #ef5350
Red 500 #f44336
Red 600 #e53935
Red 700 #d32f2f
Red 800 #c62828
Red 900 #b71c1c
Red A100 #ff8a80
Red A200 #ff5252
Red A400 #ff1744
Red A700 #d50000

Pink

色サンプル / 色の名前 16進数カラーコード
Pink 50 #fce4ec
Pink 100 #f8bbd0
Pink 200 #f48fb1
Pink 300 #f06292
Pink 400 #ec407a
Pink 500 #e91e63
Pink 600 #d81b60
Pink 700 #c2185b
Pink 800 #ad1457
Pink 900 #880e4f
Pink A100 #ff80ab
Pink A200 #ff4081
Pink A400 #f50057
Pink A700 #c51162

Purple

色サンプル / 色の名前 16進数カラーコード
Purple 50 #f3e5f5
Purple 100 #e1bee7
Purple 200 #ce93d8
Purple 300 #ba68c8
Purple 400 #ab47bc
Purple 500 #9c27b0
Purple 600 #8e24aa
Purple 700 #7b1fa2
Purple 800 #6a1b9a
Purple 900 #4a148c
Purple A100 #ea80fc
Purple A200 #e040fb
Purple A400 #d500f9
Purple A700 #aa00ff

Deep Purple

色サンプル / 色の名前 16進数カラーコード
Deep Purple 50 #ede7f6
Deep Purple 100 #d1c4e9
Deep Purple 200 #b39ddb
Deep Purple 300 #9575cd
Deep Purple 400 #7e57c2
Deep Purple 500 #673ab7
Deep Purple 600 #5e35b1
Deep Purple 700 #512da8
Deep Purple 800 #4527a0
Deep Purple 900 #311b92
Deep Purple A100 #b388ff
Deep Purple A200 #7c4dff
Deep Purple A400 #651fff
Deep Purple A700 #6200ea

Indigo

色サンプル / 色の名前 16進数カラーコード
Indigo 50 #e8eaf6
Indigo 100 #c5cae9
Indigo 200 #9fa8da
Indigo 300 #7986cb
Indigo 400 #5c6bc0
Indigo 500 #3f51b5
Indigo 600 #3949ab
Indigo 700 #303f9f
Indigo 800 #283593
Indigo 900 #1a237e
Indigo A100 #8c9eff
Indigo A200 #536dfe
Indigo A400 #3d5afe
Indigo A700 #304ffe

Blue

色サンプル / 色の名前 16進数カラーコード
Blue 50 #e3f2fd
Blue 100 #bbdefb
Blue 200 #90caf9
Blue 300 #64b5f6
Blue 400 #42a5f5
Blue 500 #2196f3
Blue 600 #1e88e5
Blue 700 #1976d2
Blue 800 #1565c0
Blue 900 #0d47a1
Blue A100 #82b1ff
Blue A200 #448aff
Blue A400 #2979ff
Blue A700 #2962ff

Light Blue

色サンプル / 色の名前 16進数カラーコード
Light Blue 50 #e1f5fe
Light Blue 100 #b3e5fc
Light Blue 200 #81d4fa
Light Blue 300 #4fc3f7
Light Blue 400 #29b6f6
Light Blue 500 #03a9f4
Light Blue 600 #039be5
Light Blue 700 #0288d1
Light Blue 800 #0277bd
Light Blue 900 #01579b
Light Blue A100 #80d8ff
Light Blue A200 #40c4ff
Light Blue A400 #00b0ff
Light Blue A700 #0091ea

Cyan

色サンプル / 色の名前 16進数カラーコード
Cyan 50 #e0f7fa
Cyan 100 #b2ebf2
Cyan 200 #80deea
Cyan 300 #4dd0e1
Cyan 400 #26c6da
Cyan 500 #00bcd4
Cyan 600 #00acc1
Cyan 700 #0097a7
Cyan 800 #00838f
Cyan 900 #006064
Cyan A100 #84ffff
Cyan A200 #18ffff
Cyan A400 #00e5ff
Cyan A700 #00b8d4

Teal

色サンプル / 色の名前 16進数カラーコード
Teal 50 #e0f2f1
Teal 100 #b2dfdb
Teal 200 #80cbc4
Teal 300 #4db6ac
Teal 400 #26a69a
Teal 500 #009688
Teal 600 #00897b
Teal 700 #00796b
Teal 800 #00695c
Teal 900 #004d40
Teal A100 #a7ffeb
Teal A200 #64ffda
Teal A400 #1de9b6
Teal A700 #00bfa5

Green

色サンプル / 色の名前 16進数カラーコード
Green 50 #e8f5e9
Green 100 #c8e6c9
Green 200 #a5d6a7
Green 300 #81c784
Green 400 #66bb6a
Green 500 #4caf50
Green 600 #43a047
Green 700 #388e3c
Green 800 #2e7d32
Green 900 #1b5e20
Green A100 #b9f6ca
Green A200 #69f0ae
Green A400 #00e676
Green A700 #00c853

Light Green

色サンプル / 色の名前 16進数カラーコード
Light Green 50 #f1f8e9
Light Green 100 #dcedc8
Light Green 200 #c5e1a5
Light Green 300 #aed581
Light Green 400 #9ccc65
Light Green 500 #8bc34a
Light Green 600 #7cb342
Light Green 700 #689f38
Light Green 800 #558b2f
Light Green 900 #33691e
Light Green A100 #ccff90
Light Green A200 #b2ff59
Light Green A400 #76ff03
Light Green A700 #64dd17

Lime

色サンプル / 色の名前 16進数カラーコード
Lime 50 #f9fbe7
Lime 100 #f0f4c3
Lime 200 #e6ee9c
Lime 300 #dce775
Lime 400 #d4e157
Lime 500 #cddc39
Lime 600 #c0ca33
Lime 700 #afb42b
Lime 800 #9e9d24
Lime 900 #827717
Lime A100 #f4ff81
Lime A200 #eeff41
Lime A400 #c6ff00
Lime A700 #aeea00

Yellow

色サンプル / 色の名前 16進数カラーコード
Yellow 50 #fffde7
Yellow 100 #fff9c4
Yellow 200 #fff59d
Yellow 300 #fff176
Yellow 400 #ffee58
Yellow 500 #ffeb3b
Yellow 600 #fdd835
Yellow 700 #fbc02d
Yellow 800 #f9a825
Yellow 900 #f57f17
Yellow A100 #ffff8d
Yellow A200 #ffff00
Yellow A400 #ffea00
Yellow A700 #ffd600

Amber

色サンプル / 色の名前 16進数カラーコード
Amber 50 #fff8e1
Amber 100 #ffecb3
Amber 200 #ffe082
Amber 300 #ffd54f
Amber 400 #ffca28
Amber 500 #ffc107
Amber 600 #ffb300
Amber 700 #ffa000
Amber 800 #ff8f00
Amber 900 #ff6f00
Amber A100 #ffe57f
Amber A200 #ffd740
Amber A400 #ffc400
Amber A700 #ffab00

Orange

色サンプル / 色の名前 16進数カラーコード
Orange 50 #fff3e0
Orange 100 #ffe0b2
Orange 200 #ffcc80
Orange 300 #ffb74d
Orange 400 #ffa726
Orange 500 #ff9800
Orange 600 #fb8c00
Orange 700 #f57c00
Orange 800 #ef6c00
Orange 900 #e65100
Orange A100 #ffd180
Orange A200 #ffab40
Orange A400 #ff9100
Orange A700 #ff6d00

Deep Orange

色サンプル / 色の名前 16進数カラーコード
Deep Orange 50 #fbe9e7
Deep Orange 100 #ffccbc
Deep Orange 200 #ffab91
Deep Orange 300 #ff8a65
Deep Orange 400 #ff7043
Deep Orange 500 #ff5722
Deep Orange 600 #f4511e
Deep Orange 700 #e64a19
Deep Orange 800 #d84315
Deep Orange 900 #bf360c
Deep Orange A100 #ff9e80
Deep Orange A200 #ff6e40
Deep Orange A400 #ff3d00
Deep Orange A700 #dd2c00

Brown

色サンプル / 色の名前 16進数カラーコード
Brown 50 #efebe9
Brown 100 #d7ccc8
Brown 200 #bcaaa4
Brown 300 #a1887f
Brown 400 #8d6e63
Brown 500 #795548
Brown 600 #6d4c41
Brown 700 #5d4037
Brown 800 #4e342e
Brown 900 #3e2723

Gray

色サンプル / 色の名前 16進数カラーコード
Gray 50 #fafafa
Gray 100 #f5f5f5
Gray 200 #eeeeee
Gray 300 #e0e0e0
Gray 400 #bdbdbd
Gray 500 #9e9e9e
Gray 600 #757575
Gray 700 #616161
Gray 800 #424242
Gray 900 #212121

Blue Gray

色サンプル / 色の名前 16進数カラーコード
Blue Gray 50 #eceff1
Blue Gray 100 #cfd8dc
Blue Gray 200 #b0bec5
Blue Gray 300 #90a4ae
Blue Gray 400 #78909c
Blue Gray 500 #607d8b
Blue Gray 600 #546e7a
Blue Gray 700 #455a64
Blue Gray 800 #37474f
Blue Gray 900 #263238

Black

色サンプル / 色の名前 16進数カラーコード
Black #000000

White

色サンプル / 色の名前 16進数カラーコード
White #ffffff

Photon Design System (Mozilla)

Blue

色サンプル / 色の名前 16進数カラーコード
Blue 40 #45a1ff
Blue 50 #0a84ff
Blue 60 #0060df
Blue 70 #003eaa
Blue 80 #002275
Blue 90 #000f40

Teal

色サンプル / 色の名前 16進数カラーコード
Teal 50 #00feff
Teal 60 #00c8d7
Teal 70 #008ea4
Teal 80 #005a71
Teal 90 #002d3e

Magenta

色サンプル / 色の名前 16進数カラーコード
Magenta 50 #ff1ad9
Magenta 60 #ed00b5
Magenta 70 #b5007f
Magenta 80 #7d004f
Magenta 90 #440027

Green

色サンプル / 色の名前 16進数カラーコード
Green 50 #30e60b
Green 60 #12bc00
Green 70 #058b00
Green 80 #006504
Green 90 #003706

Yellow

色サンプル / 色の名前 16進数カラーコード
Yellow 50 #ffe900
Yellow 60 #d7b600
Yellow 70 #a47f00
Yellow 80 #715100
Yellow 90 #3e2800

Red

色サンプル / 色の名前 16進数カラーコード
Red 50 #ff0039
Red 60 #d70022
Red 70 #a4000f
Red 80 #5a0002
Red 90 #3e0200

Purple

色サンプル / 色の名前 16進数カラーコード
Purple 30 #c069ff
Purple 40 #ad3bff
Purple 50 #9400ff
Purple 60 #8000d7
Purple 70 #6200a4
Purple 80 #440071
Purple 90 #25003e

Orange

色サンプル / 色の名前 16進数カラーコード
Orange 50 #ff9400
Orange 60 #d76e00
Orange 70 #a44900
Orange 80 #712b00
Orange 90 #3e1300

Ink Color

色サンプル / 色の名前 16進数カラーコード
Ink 70 #363959
Ink 80 #202340
Ink 90 #0f1126

Grey

色サンプル / 色の名前 16進数カラーコード
Grey 10 #f9f9fa
Grey 20 #ededf0
Grey 30 #d7d7db
Grey 40 #b1b1b3
Grey 50 #737373
Grey 60 #4a4a4f
Grey 70 #38383d
Grey 80 #2a2a2e
Grey 90 #0c0c0d

White

色サンプル / 色の名前 16進数カラーコード
White 100 #ffffff

Windows の色

色サンプル / 色の名前 16進数カラーコード
イエロー ゴールド #fdb829
金色 #fd8a1f
ブライト オレンジ #f4611c
ダーク オレンジ #c7501c
ラスト #d73b0e
ペール ラスト #ec6751
ブリック レッド #ce333a
モッド レッド #fc4144
ペール レッド #e44656
#e50426
ブライト ローズ #e7005c
ローズ #bf0051
ライト プラム #e00088
プラム #bb0074
ライト オーキッド #bf33ae
オーキッド #970085
規定の青 #1174d3
ネービー ブルー #0e61ad
パープル シャドウ #8c88d4
ダーク パープル シャドウ #6a65d1
アイリス パステル #8561b4
アイリス スプリング #724aa5
ライト バイオレット レッド #ae41bd
バイオレット レッド #850b93
ブライト クール ブルー #1897b9
クール ブルー #337b97
シーフォーム #1db5c1
シーフォーム ティール #178285
ライト ミント #1db193
ダーク ミント #168474
ターフ グリーン #22cc6f
スポーツ グリーン #1f8944
灰色 #797473
グレー ブラウン #5d5a58
スチール ブルー #687488
メタル ブルー #525c6a
ペール モス #577b72
モス #4a6860
メドウグリーン #4c821f
#1e7c23
オーバーキャスト #757575
ストーム #4d4b49
ブルー グレー #69787c
グレー ダーク #4b5459
Liddy グリーン #647b64
セージ #535e55
カモフラージュ デザート #827449
カモフラージュ #7c725f

出典

Back to Top