at 8 AM, JP.Color Reference. - Study at 8am.

Webブラウザ上で指定できる色について紹介します。

16進数による色の指定について学習します。


Reds (h:0)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ffcccc #fccfcf #fad1d1 #f7d4d4 #f5d6d6 #f2d9d9 #f0dbdb #eddede #ebe0e0 #e8e3e3
80% #ff9999 #fa9e9e #f5a3a3 #f0a8a8 #ebadad #e6b3b3 #e0b8b8 #dbbdbd #d6c2c2 #d1c7c7
70% #ff6666 #f76e6e #f07575 #e87d7d #e08585 #d98c8c #d19494 #c99c9c #c2a3a3 #baabab
60% #ff3333 #f53d3d #eb4747 #e05252 #d65c5c #cc6666 #c27070 #b87a7a #ad8585 #a38f8f
50% #ff0000 #f20d0d #e61a1a #d92626 #cc3333 #bf4040 #b34d4d #a65959 #996666 #8c7373
40% #cc0000 #c20a0a #b81414 #ad1f1f #a32929 #993333 #8f3d3d #854747 #7a5252 #705c5c
30% #990000 #910808 #8a0f0f #821717 #7a1f1f #732626 #6b2e2e #633636 #5c3d3d #544545
20% #660000 #610505 #5c0a0a #570f0f #521414 #4d1a1a #471f1f #422424 #3d2929 #382e2e
10% #330000 #300303 #2e0505 #2b0808 #290a0a #260d0d #240f0f #211212 #1f1414 #1c1717
Oranges (h:30)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ffe6cc #fce6cf #fae6d1 #f7e6d4 #f5e6d6 #f2e6d9 #f0e6db #ede6de #ebe6e0 #e8e6e3
80% #ffcc99 #facc9e #f5cca3 #f0cca8 #ebccad #e6ccb3 #e0ccb8 #dbccbd #d6ccc2 #d1ccc7
70% #ffb366 #f7b36e #f0b375 #e8b37d #e0b385 #d9b38c #d1b394 #c9b39c #c2b3a3 #bab3ab
60% #ff9933 #f5993d #eb9947 #e09952 #d6995c #cc9966 #c29970 #b8997a #ad9985 #a3998f
50% #ff8000 #f2800d #e6801a #d98026 #cc8033 #bf8040 #b3804d #a68059 #998066 #8c8073
40% #cc6600 #c2660a #b86614 #ad661f #a36629 #996633 #8f663d #856647 #7a6652 #70665c
30% #994d00 #914d08 #8a4d0f #824d17 #7a4d1f #734d26 #6b4d2e #634d36 #5c4d3d #544d45
20% #663300 #613305 #5c330a #57330f #523314 #4d331a #47331f #423324 #3d3329 #38332e
10% #331a00 #301a03 #2e1a05 #2b1a08 #291a0a #261a0d #241a0f #211a12 #1f1a14 #1c1a17
Yellows (h:60)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ffffcc #fcfccf #fafad1 #f7f7d4 #f5f5d6 #f2f2d9 #f0f0db #ededde #ebebe0 #e8e8e3
80% #ffff99 #fafa9e #f5f5a3 #f0f0a8 #ebebad #e6e6b3 #e0e0b8 #dbdbbd #d6d6c2 #d1d1c7
70% #ffff66 #f7f76e #f0f075 #e8e87d #e0e085 #d9d98c #d1d194 #c9c99c #c2c2a3 #babaab
60% #ffff33 #f5f53d #ebeb47 #e0e052 #d6d65c #cccc66 #c2c270 #b8b87a #adad85 #a3a38f
50% #ffff00 #f2f20d #e6e61a #d9d926 #cccc33 #bfbf40 #b3b34d #a6a659 #999966 #8c8c73
40% #cccc00 #c2c20a #b8b814 #adad1f #a3a329 #999933 #8f8f3d #858547 #7a7a52 #70705c
30% #999900 #919108 #8a8a0f #828217 #7a7a1f #737326 #6b6b2e #636336 #5c5c3d #545445
20% #666600 #616105 #5c5c0a #57570f #525214 #4d4d1a #47471f #424224 #3d3d29 #38382e
10% #333300 #303003 #2e2e05 #2b2b08 #29290a #26260d #24240f #212112 #1f1f14 #1c1c17
Yellow-Greens (h:90)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #e6ffcc #e6fccf #e6fad1 #e6f7d4 #e6f5d6 #e6f2d9 #e6f0db #e6edde #e6ebe0 #e6e8e3
80% #ccff99 #ccfa9e #ccf5a3 #ccf0a8 #ccebad #cce6b3 #cce0b8 #ccdbbd #ccd6c2 #ccd1c7
70% #b3ff66 #b3f76e #b3f075 #b3e87d #b3e085 #b3d98c #b3d194 #b3c99c #b3c2a3 #b3baab
60% #99ff33 #99f53d #99eb47 #99e052 #99d65c #99cc66 #99c270 #99b87a #99ad85 #99a38f
50% #80ff00 #80f20d #80e61a #80d926 #80cc33 #80bf40 #80b34d #80a659 #809966 #808c73
40% #66cc00 #66c20a #66b814 #66ad1f #66a329 #669933 #668f3d #668547 #667a52 #66705c
30% #4d9900 #4d9108 #4d8a0f #4d8217 #4d7a1f #4d7326 #4d6b2e #4d6336 #4d5c3d #4d5445
20% #336600 #336105 #335c0a #33570f #335214 #334d1a #33471f #334224 #333d29 #33382e
10% #1a3300 #1a3003 #1a2e05 #1a2b08 #1a290a #1a260d #1a240f #1a2112 #1a1f14 #1a1c17
Greens (h:120)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ccffcc #cffccf #d1fad1 #d4f7d4 #d6f5d6 #d9f2d9 #dbf0db #deedde #e0ebe0 #e3e8e3
80% #99ff99 #9efa9e #a3f5a3 #a8f0a8 #adebad #b3e6b3 #b8e0b8 #bddbbd #c2d6c2 #c7d1c7
70% #66ff66 #6ef76e #75f075 #7de87d #85e085 #8cd98c #94d194 #9cc99c #a3c2a3 #abbaab
60% #33ff33 #3df53d #47eb47 #52e052 #5cd65c #66cc66 #70c270 #7ab87a #85ad85 #8fa38f
50% #00ff00 #0df20d #1ae61a #26d926 #33cc33 #40bf40 #4db34d #59a659 #669966 #738c73
40% #00cc00 #0ac20a #14b814 #1fad1f #29a329 #339933 #3d8f3d #478547 #527a52 #5c705c
30% #009900 #089108 #0f8a0f #178217 #1f7a1f #267326 #2e6b2e #366336 #3d5c3d #455445
20% #006600 #056105 #0a5c0a #0f570f #145214 #1a4d1a #1f471f #244224 #293d29 #2e382e
10% #003300 #033003 #052e05 #082b08 #0a290a #0d260d #0f240f #122112 #141f14 #171c17
Green-Cyans (h:150)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ccffe6 #cffce6 #d1fae6 #d4f7e6 #d6f5e6 #d9f2e6 #dbf0e6 #deede6 #e0ebe6 #e3e8e6
80% #99ffcc #9efacc #a3f5cc #a8f0cc #adebcc #b3e6cc #b8e0cc #bddbcc #c2d6cc #c7d1cc
70% #66ffb3 #6ef7b3 #75f0b3 #7de8b3 #85e0b3 #8cd9b3 #94d1b3 #9cc9b3 #a3c2b3 #abbab3
60% #33ff99 #3df599 #47eb99 #52e099 #5cd699 #66cc99 #70c299 #7ab899 #85ad99 #8fa399
50% #00ff80 #0df280 #1ae680 #26d980 #33cc80 #40bf80 #4db380 #59a680 #669980 #738c80
40% #00cc66 #0ac266 #14b866 #1fad66 #29a366 #339966 #3d8f66 #478566 #527a66 #5c7066
30% #00994d #08914d #0f8a4d #17824d #1f7a4d #26734d #2e6b4d #36634d #3d5c4d #45544d
20% #006633 #056133 #0a5c33 #0f5733 #145233 #1a4d33 #1f4733 #244233 #293d33 #2e3833
10% #00331a #03301a #052e1a #082b1a #0a291a #0d261a #0f241a #12211a #141f1a #171c1a
Cyans (h:180)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ccffff #cffcfc #d1fafa #d4f7f7 #d6f5f5 #d9f2f2 #dbf0f0 #deeded #e0ebeb #e3e8e8
80% #99ffff #9efafa #a3f5f5 #a8f0f0 #adebeb #b3e6e6 #b8e0e0 #bddbdb #c2d6d6 #c7d1d1
70% #66ffff #6ef7f7 #75f0f0 #7de8e8 #85e0e0 #8cd9d9 #94d1d1 #9cc9c9 #a3c2c2 #abbaba
60% #33ffff #3df5f5 #47ebeb #52e0e0 #5cd6d6 #66cccc #70c2c2 #7ab8b8 #85adad #8fa3a3
50% #00ffff #0df2f2 #1ae6e6 #26d9d9 #33cccc #40bfbf #4db3b3 #59a6a6 #669999 #738c8c
40% #00cccc #0ac2c2 #14b8b8 #1fadad #29a3a3 #339999 #3d8f8f #478585 #527a7a #5c7070
30% #009999 #089191 #0f8a8a #178282 #1f7a7a #267373 #2e6b6b #366363 #3d5c5c #455454
20% #006666 #056161 #0a5c5c #0f5757 #145252 #1a4d4d #1f4747 #244242 #293d3d #2e3838
10% #003333 #033030 #052e2e #082b2b #0a2929 #0d2626 #0f2424 #122121 #141f1f #171c1c
Cyan-Blues (h:210)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #cce6ff #cfe6fc #d1e6fa #d4e6f7 #d6e6f5 #d9e6f2 #dbe6f0 #dee6ed #e0e6eb #e3e6e8
80% #99ccff #9eccfa #a3ccf5 #a8ccf0 #adcceb #b3cce6 #b8cce0 #bdccdb #c2ccd6 #c7ccd1
70% #66b3ff #6eb3f7 #75b3f0 #7db3e8 #85b3e0 #8cb3d9 #94b3d1 #9cb3c9 #a3b3c2 #abb3ba
60% #3399ff #3d99f5 #4799eb #5299e0 #5c99d6 #6699cc #7099c2 #7a99b8 #8599ad #8f99a3
50% #0080ff #0d80f2 #1a80e6 #2680d9 #3380cc #4080bf #4d80b3 #5980a6 #668099 #73808c
40% #0066cc #0a66c2 #1466b8 #1f66ad #2966a3 #336699 #3d668f #476685 #52667a #5c6670
30% #004d99 #084d91 #0f4d8a #174d82 #1f4d7a #264d73 #2e4d6b #364d63 #3d4d5c #454d54
20% #003366 #053361 #0a335c #0f3357 #143352 #1a334d #1f3347 #243342 #29333d #2e3338
10% #001a33 #031a30 #051a2e #081a2b #0a1a29 #0d1a26 #0f1a24 #121a21 #141a1f #171a1c
Blues (h:240)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ccccff #cfcffc #d1d1fa #d4d4f7 #d6d6f5 #d9d9f2 #dbdbf0 #dedeed #e0e0eb #e3e3e8
80% #9999ff #9e9efa #a3a3f5 #a8a8f0 #adadeb #b3b3e6 #b8b8e0 #bdbddb #c2c2d6 #c7c7d1
70% #6666ff #6e6ef7 #7575f0 #7d7de8 #8585e0 #8c8cd9 #9494d1 #9c9cc9 #a3a3c2 #ababba
60% #3333ff #3d3df5 #4747eb #5252e0 #5c5cd6 #6666cc #7070c2 #7a7ab8 #8585ad #8f8fa3
50% #0000ff #0d0df2 #1a1ae6 #2626d9 #3333cc #4040bf #4d4db3 #5959a6 #666699 #73738c
40% #0000cc #0a0ac2 #1414b8 #1f1fad #2929a3 #333399 #3d3d8f #474785 #52527a #5c5c70
30% #000099 #080891 #0f0f8a #171782 #1f1f7a #262673 #2e2e6b #363663 #3d3d5c #454554
20% #000066 #050561 #0a0a5c #0f0f57 #141452 #1a1a4d #1f1f47 #242442 #29293d #2e2e38
10% #000033 #030330 #05052e #08082b #0a0a29 #0d0d26 #0f0f24 #121221 #14141f #17171c
Blue-Magentas (h:270)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #e6ccff #e6cffc #e6d1fa #e6d4f7 #e6d6f5 #e6d9f2 #e6dbf0 #e6deed #e6e0eb #e6e3e8
80% #cc99ff #cc9efa #cca3f5 #cca8f0 #ccadeb #ccb3e6 #ccb8e0 #ccbddb #ccc2d6 #ccc7d1
70% #b366ff #b36ef7 #b375f0 #b37de8 #b385e0 #b38cd9 #b394d1 #b39cc9 #b3a3c2 #b3abba
60% #9933ff #993df5 #9947eb #9952e0 #995cd6 #9966cc #9970c2 #997ab8 #9985ad #998fa3
50% #8000ff #800df2 #801ae6 #8026d9 #8033cc #8040bf #804db3 #8059a6 #806699 #80738c
40% #6600cc #660ac2 #6614b8 #661fad #6629a3 #663399 #663d8f #664785 #66527a #665c70
30% #4d0099 #4d0891 #4d0f8a #4d1782 #4d1f7a #4d2673 #4d2e6b #4d3663 #4d3d5c #4d4554
20% #330066 #330561 #330a5c #330f57 #331452 #331a4d #331f47 #332442 #33293d #332e38
10% #1a0033 #1a0330 #1a052e #1a082b #1a0a29 #1a0d26 #1a0f24 #1a1221 #1a141f #1a171c
Magentas (h:300)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ffccff #fccffc #fad1fa #f7d4f7 #f5d6f5 #f2d9f2 #f0dbf0 #eddeed #ebe0eb #e8e3e8
80% #ff99ff #fa9efa #f5a3f5 #f0a8f0 #ebadeb #e6b3e6 #e0b8e0 #dbbddb #d6c2d6 #d1c7d1
70% #ff66ff #f76ef7 #f075f0 #e87de8 #e085e0 #d98cd9 #d194d1 #c99cc9 #c2a3c2 #baabba
60% #ff33ff #f53df5 #eb47eb #e052e0 #d65cd6 #cc66cc #c270c2 #b87ab8 #ad85ad #a38fa3
50% #ff00ff #f20df2 #e61ae6 #d926d9 #cc33cc #bf40bf #b34db3 #a659a6 #996699 #8c738c
40% #cc00cc #c20ac2 #b814b8 #ad1fad #a329a3 #993399 #8f3d8f #854785 #7a527a #705c70
30% #990099 #910891 #8a0f8a #821782 #7a1f7a #732673 #6b2e6b #633663 #5c3d5c #544554
20% #660066 #610561 #5c0a5c #570f57 #521452 #4d1a4d #471f47 #422442 #3d293d #382e38
10% #330033 #300330 #2e052e #2b082b #290a29 #260d26 #240f24 #211221 #1f141f #1c171c
Magenta-Reds (h:330)
l | s 100% 90% 80% 70% 60% 50% 40% 30% 20% 10%
90% #ffcce6 #fccfe6 #fad1e6 #f7d4e6 #f5d6e6 #f2d9e6 #f0dbe6 #eddee6 #ebe0e6 #e8e3e6
80% #ff99cc #fa9ecc #f5a3cc #f0a8cc #ebadcc #e6b3cc #e0b8cc #dbbdcc #d6c2cc #d1c7cc
70% #ff66b3 #f76eb3 #f075b3 #e87db3 #e085b3 #d98cb3 #d194b3 #c99cb3 #c2a3b3 #baabb3
60% #ff3399 #f53d99 #eb4799 #e05299 #d65c99 #cc6699 #c27099 #b87a99 #ad8599 #a38f99
50% #ff0080 #f20d80 #e61a80 #d92680 #cc3380 #bf4080 #b34d80 #a65980 #996680 #8c7380
40% #cc0066 #c20a66 #b81466 #ad1f66 #a32966 #993366 #8f3d66 #854766 #7a5266 #705c66
30% #99004d #91084d #8a0f4d #82174d #7a1f4d #73264d #6b2e4d #63364d #5c3d4d #54454d
20% #660033 #610533 #5c0a33 #570f33 #521433 #4d1a33 #471f33 #422433 #3d2933 #382e33
10% #33001a #30031a #2e051a #2b081a #290a1a #260d1a #240f1a #21121a #1f141a #1c171a
White - Black
l | s 0%
100% #ffffff
95% #f2f2f2
90% #e6e6e6
85% #d9d9d9
80% #cccccc
75% #bfbfbf
70% #b3b3b3
65% #a6a6a6
60% #999999
55% #8c8c8c
50% #808080
45% #737373
40% #666666
35% #595959
30% #4c4c4c
25% #404040
20% #333333
15% #262626
10% #191919
5% #0d0d0d
0% #000000