CHROMATIC MATRIX - 700 Colors

#000000

#000022

#000044

#000066

#000088

#0000AA

#0000CC

#0000EE

#0000FF

#002200

#002222

#002244

#002266

#002288

#0022AA

#0022CC

#0022EE

#0022FF

#004400

#004422

#004444

#004466

#004488

#0044AA

#0044CC

#0044EE

#0044FF

#006600

#006622

#006644

#006666

#006688

#0066AA

#0066CC

#0066EE

#0066FF

#008800

#008822

#008844

#008866

#008888

#0088AA

#0088CC

#0088EE

#0088FF

#00AA00

#00AA22

#00AA44

#00AA66

#00AA88

#00AAAA

#00AACC

#00AAEE

#00AAFF

#00CC00

#00CC22

#00CC44

#00CC66

#00CC88

#00CCAA

#00CCCC

#00CCEE

#00CCFF

#00EE00

#00EE22

#00EE44

#00EE66

#00EE88

#00EEAA

#00EECC

#00EEEE

#00EEFF

#00FF00

#00FF22

#00FF44

#00FF66

#00FF88

#00FFAA

#00FFCC

#00FFEE

#00FFFF

#220000

#220022

#220044

#220066

#220088

#2200AA

#2200CC

#2200EE

#2200FF

#222200

#222222

#222244

#222266

#222288

#2222AA

#2222CC

#2222EE

#2222FF

#224400

#224422

#224444

#224466

#224488

#2244AA

#2244CC

#2244EE

#2244FF

#226600

#226622

#226644

#226666

#226688

#2266AA

#2266CC

#2266EE

#2266FF

#228800

#228822

#228844

#228866

#228888

#2288AA

#2288CC

#2288EE

#2288FF

#22AA00

#22AA22

#22AA44

#22AA66

#22AA88

#22AAAA

#22AACC

#22AAEE

#22AAFF

#22CC00

#22CC22

#22CC44

#22CC66

#22CC88

#22CCAA

#22CCCC

#22CCEE

#22CCFF

#22EE00

#22EE22

#22EE44

#22EE66

#22EE88

#22EEAA

#22EECC

#22EEEE

#22EEFF

#22FF00

#22FF22

#22FF44

#22FF66

#22FF88

#22FFAA

#22FFCC

#22FFEE

#22FFFF

#440000

#440022

#440044

#440066

#440088

#4400AA

#4400CC

#4400EE

#4400FF

#442200

#442222

#442244

#442266

#442288

#4422AA

#4422CC

#4422EE

#4422FF

#444400

#444422

#444444

#444466

#444488

#4444AA

#4444CC

#4444EE

#4444FF

#446600

#446622

#446644

#446666

#446688

#4466AA

#4466CC

#4466EE

#4466FF

#448800

#448822

#448844

#448866

#448888

#4488AA

#4488CC

#4488EE

#4488FF

#44AA00

#44AA22

#44AA44

#44AA66

#44AA88

#44AAAA

#44AACC

#44AAEE

#44AAFF

#44CC00

#44CC22

#44CC44

#44CC66

#44CC88

#44CCAA

#44CCCC

#44CCEE

#44CCFF

#44EE00

#44EE22

#44EE44

#44EE66

#44EE88

#44EEAA

#44EECC

#44EEEE

#44EEFF

#44FF00

#44FF22

#44FF44

#44FF66

#44FF88

#44FFAA

#44FFCC

#44FFEE

#44FFFF

#660000

#660022

#660044

#660066

#660088

#6600AA

#6600CC

#6600EE

#6600FF

#662200

#662222

#662244

#662266

#662288

#6622AA

#6622CC

#6622EE

#6622FF

#664400

#664422

#664444

#664466

#664488

#6644AA

#6644CC

#6644EE

#6644FF

#666600

#666622

#666644

#666666

#666688

#6666AA

#6666CC

#6666EE

#6666FF

#668800

#668822

#668844

#668866

#668888

#6688AA

#6688CC

#6688EE

#6688FF

#66AA00

#66AA22

#66AA44

#66AA66

#66AA88

#66AAAA

#66AACC

#66AAEE

#66AAFF

#66CC00

#66CC22

#66CC44

#66CC66

#66CC88

#66CCAA

#66CCCC

#66CCEE

#66CCFF

#66EE00

#66EE22

#66EE44

#66EE66

#66EE88

#66EEAA

#66EECC

#66EEEE

#66EEFF

#66FF00

#66FF22

#66FF44

#66FF66

#66FF88

#66FFAA

#66FFCC

#66FFEE

#66FFFF

#880000

#880022

#880044

#880066

#880088

#8800AA

#8800CC

#8800EE

#8800FF

#882200

#882222

#882244

#882266

#882288

#8822AA

#8822CC

#8822EE

#8822FF

#884400

#884422

#884444

#884466

#884488

#8844AA

#8844CC

#8844EE

#8844FF

#886600

#886622

#886644

#886666

#886688

#8866AA

#8866CC

#8866EE

#8866FF

#888800

#888822

#888844

#888866

#888888

#8888AA

#8888CC

#8888EE

#8888FF

#88AA00

#88AA22

#88AA44

#88AA66

#88AA88

#88AAAA

#88AACC

#88AAEE

#88AAFF

#88CC00

#88CC22

#88CC44

#88CC66

#88CC88

#88CCAA

#88CCCC

#88CCEE

#88CCFF

#88EE00

#88EE22

#88EE44

#88EE66

#88EE88

#88EEAA

#88EECC

#88EEEE

#88EEFF

#88FF00

#88FF22

#88FF44

#88FF66

#88FF88

#88FFAA

#88FFCC

#88FFEE

#88FFFF

#AA0000

#AA0022

#AA0044

#AA0066

#AA0088

#AA00AA

#AA00CC

#AA00EE

#AA00FF

#AA2200

#AA2222

#AA2244

#AA2266

#AA2288

#AA22AA

#AA22CC

#AA22EE

#AA22FF

#AA4400

#AA4422

#AA4444

#AA4466

#AA4488

#AA44AA

#AA44CC

#AA44EE

#AA44FF

#AA6600

#AA6622

#AA6644

#AA6666

#AA6688

#AA66AA

#AA66CC

#AA66EE

#AA66FF

#AA8800

#AA8822

#AA8844

#AA8866

#AA8888

#AA88AA

#AA88CC

#AA88EE

#AA88FF

#AAAA00

#AAAA22

#AAAA44

#AAAA66

#AAAA88

#AAAAAA

#AAAACC

#AAAAEE

#AAAAFF

#AACC00

#AACC22

#AACC44

#AACC66

#AACC88

#AACCAA

#AACCCC

#AACCEE

#AACCFF

#AAEE00

#AAEE22

#AAEE44

#AAEE66

#AAEE88

#AAEEAA

#AAEECC

#AAEEEE

#AAEEFF

#AAFF00

#AAFF22

#AAFF44

#AAFF66

#AAFF88

#AAFFAA

#AAFFCC

#AAFFEE

#AAFFFF

#CC0000

#CC0022

#CC0044

#CC0066

#CC0088

#CC00AA

#CC00CC

#CC00EE

#CC00FF

#CC2200

#CC2222

#CC2244

#CC2266

#CC2288

#CC22AA

#CC22CC

#CC22EE

#CC22FF

#CC4400

#CC4422

#CC4444

#CC4466

#CC4488

#CC44AA

#CC44CC

#CC44EE

#CC44FF

#CC6600

#CC6622

#CC6644

#CC6666

#CC6688

#CC66AA

#CC66CC

#CC66EE

#CC66FF

#CC8800

#CC8822

#CC8844

#CC8866

#CC8888

#CC88AA

#CC88CC

#CC88EE

#CC88FF

#CCAA00

#CCAA22

#CCAA44

#CCAA66

#CCAA88

#CCAAAA

#CCAACC

#CCAAEE

#CCAAFF

#CCCC00

#CCCC22

#CCCC44

#CCCC66

#CCCC88

#CCCCAA

#CCCCCC

#CCCCEE

#CCCCFF

#CCEE00

#CCEE22

#CCEE44

#CCEE66

#CCEE88

#CCEEAA

#CCEECC

#CCEEEE

#CCEEFF

#CCFF00

#CCFF22

#CCFF44

#CCFF66

#CCFF88

#CCFFAA

#CCFFCC

#CCFFEE

#CCFFFF

#EE0000

#EE0022

#EE0044

#EE0066

#EE0088

#EE00AA

#EE00CC

#EE00EE

#EE00FF

#EE2200

#EE2222

#EE2244

#EE2266

#EE2288

#EE22AA

#EE22CC

#EE22EE

#EE22FF

#EE4400

#EE4422

#EE4444

#EE4466

#EE4488

#EE44AA

#EE44CC

#EE44EE

#EE44FF

#EE6600

#EE6622

#EE6644

#EE6666

#EE6688

#EE66AA

#EE66CC

#EE66EE

#EE66FF

#EE8800

#EE8822

#EE8844

#EE8866

#EE8888

#EE88AA

#EE88CC

#EE88EE

#EE88FF

#EEAA00

#EEAA22

#EEAA44

#EEAA66

#EEAA88

#EEAAAA

#EEAACC

#EEAAEE

#EEAAFF

#EECC00

#EECC22

#EECC44

#EECC66

#EECC88

#EECCAA

#EECCCC

#EECCEE

#EECCFF

#EEEE00

#EEEE22

#EEEE44

#EEEE66

#EEEE88

#EEEEAA

#EEEECC

#EEEEEE

#EEEEFF

#EEFF00

#EEFF22

#EEFF44

#EEFF66

#EEFF88

#EEFFAA

#EEFFCC

#EEFFEE

#EEFFFF

#FF0000

#FF0022

#FF0044

#FF0066

#FF0088

#FF00AA

#FF00CC

#FF00EE

#FF00FF

#FF2200

#FF2222

#FF2244

#FF2266

#FF2288

#FF22AA

#FF22CC

#FF22EE

#FF22FF

#FF4400

#FF4422

#FF4444

#FF4466

#FF4488

#FF44AA

#FF44CC

#FF44EE

#FF44FF

#FF6600

#FF6622

#FF6644

#FF6666

#FF6688

#FF66AA

#FF66CC

#FF66EE

#FF66FF

#FF8800

#FF8822

#FF8844

#FF8866

#FF8888

#FF88AA

#FF88CC

#FF88EE

#FF88FF

#FFAA00

#FFAA22

#FFAA44

#FFAA66

#FFAA88

#FFAAAA

#FFAACC

HTML/CSS COLOR SETTING SAMPLES 20

1. 基本カラーネーム

Text

color: red;

2. 拡張カラーネーム

Text

background-color: tomato;

3. 16進数コード (6桁)

#3B82F6

color: #3b82f6;

4. 16進数コード (3桁短縮)

#F00

color: #f00;

5. 16進数 + 不透明度 (8桁)

50% Alpha

background: #3b82f680;

6. RGB関数

rgb()

color: rgb(34, 197, 94);

7. RGBA関数 (不透明度)

Alpha 0.4

background: rgba(34,197,94,0.4);

8. HSL関数

hsl()

color: hsl(217, 91%, 60%);

9. HSLA関数 (不透明度付き)

Alpha 0.5

background: hsla(217,91%,60%,0.5);

10. CSS変数 (Variables)

--main-color

color: var(--main-color);

11. 線形グラデーション (Linear)

Linear

background: linear-gradient(...);

12. 円形グラデーション (Radial)

Radial

background: radial-gradient(...);

13. 文字へのグラデーション

★GRADIENT TEXT★

-webkit-background-clip: text;

14. 完全透過キーワード

Transparent

background-color: transparent;

15. 親色の継承 (Inherit)

Inherit Color

border-color: inherit;

16. 現在の文字色と連動

currentColor

border-color: currentColor;

17. 影の色 (Box Shadow)

Shadow Color

box-shadow: 0 0 10px #a855f7;

18. 文字の影 (Text Shadow)

Glow / Shadow

text-shadow: 2px 2px 0 #000;

19. 輪郭・外枠の色 (Outline)

Outline

outline: 2px solid #eab308;

20. SVGアイコン等の色 (Fill)

▼ SVG Fill

fill: #10b981;