Skip to content

30 Metallic Color Palettes & Code

Explore 30 expertly curated metallic color palettes, featuring diverse thematic schemes including gold, silver, copper, bronze, and chrome designs. A comprehensive color inspiration library for UI design, branding, and product design.

metallic color palette
#FFD700
#C0C0C0
#B76E79
#B87333
#CD7F32
#D4D4D4
#2C3539

Metallic Colors

Copy HEX
HEX#FFD700
RGBrgb(255, 215, 0)
Copy HEX
HEX#C0C0C0
RGBrgb(192, 192, 192)
Copy HEX
HEX#B76E79
RGBrgb(183, 110, 121)
Copy HEX
HEX#B87333
RGBrgb(184, 115, 51)
Copy HEX
HEX#CD7F32
RGBrgb(205, 127, 50)
Copy HEX
HEX#D4D4D4
RGBrgb(212, 212, 212)
Copy HEX
HEX#E5E4E2
RGBrgb(229, 228, 226)
Copy HEX
HEX#2C3539
RGBrgb(44, 53, 57)
Copy HEX
HEX#B5A642
RGBrgb(181, 166, 66)
Copy HEX
HEX#8A8A8A
RGBrgb(138, 138, 138)
Copy HEX
HEX#4682B4
RGBrgb(70, 130, 180)
Copy HEX
HEX#F8F8FF
RGBrgb(248, 248, 255)
Copy HEX
HEX#878681
RGBrgb(135, 134, 129)
Copy HEX
HEX#727472
RGBrgb(114, 116, 114)
Copy HEX
HEX#848789
RGBrgb(132, 135, 137)
Copy HEX
HEX#5A5A5A
RGBrgb(90, 90, 90)
Copy HEX
HEX#BEC2CB
RGBrgb(190, 194, 203)
Copy HEX
HEX#3D3D3D
RGBrgb(61, 61, 61)
Copy HEX
HEX#6F6F6F
RGBrgb(111, 111, 111)
Copy HEX
HEX#383838
RGBrgb(56, 56, 56)

Metallic Color Palettes

Click on any color below to view a complete color palette generated from that base color. Each palette is algorithmically created to harmonize with the selected metallic hue.

Gold

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#FFF7C5
Light
#FFEC93
Medium Light
#FFE15E
Medium
#FFD700
Medium Dark
#B5990F
Dark
#705F10
Darkest
#322B09

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#FFD700
Left Dark
#FFDE5E
Left Medium
#FFE593
Left Light
#FEEDC4
Neutral
#F5F5F5
Right Light
#D3C1FA
Right Medium
#AC8EFD
Right Dark
#7A5CFF
Complementary End
#0028FF

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#FFEA98
Medium
#FFD700
Dark
#7C6500
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#FF0028
Left Adjacent 1
#FF5700
Main
#FFD700
Right Adjacent 1
#A7FF00
Right Adjacent 2
#28FF00

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#FFD700
Complementary
#0028FF

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#FFD700
Secondary
#00FFD7
Tertiary
#D700FF

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#FFD700
Right 90°
#00FF58
Complementary
#0028FF
Left 90°
#FF00A7

Tetradic

Two pairs of complementary colors

4 colors
Main
#FFD700
Secondary
#28FF00
Complementary
#0028FF
Complementary Secondary
#D700FF

Split Complementary

Complementary colors ±30°

3 colors
Main
#FFD700
Split Left
#00A7FF
Split Right
#5800FF

Cyclic

Circular gradient for periodic data

8 colors
#FFD700
45°
#68FF00
90°
#00FF58
135°
#00E7FF
180°
#0028FF
225°
#9700FF
270°
#FF00A7
315°
#FF1800

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#C9C29C
Pastel 1
#D1CAA9
Pastel 2
#D8D2B6
Pastel 3
#DFDBC3
Pastel 4
#E6E3D1
Deep Pastel
#EDEBDE

Silver

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F2F2F2
Light
#E1E1E1
Medium Light
#D1D1D1
Medium
#C0C0C0
Medium Dark
#9D9D9D
Dark
#7A7A7A
Darkest
#5A5A5A

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#C0C0C0
Left Dark
#CDCDCD
Left Medium
#DADADA
Left Light
#E8E8E8
Neutral
#F5F5F5
Right Light
#E8E8E8
Right Medium
#DADADA
Right Dark
#CDCDCD
Complementary End
#C0C0C0

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#DFDFDF
Medium
#C0C0C0
Dark
#5B5B5B
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#C0C0C0
Left Adjacent 1
#C0C0C0
Main
#C0C0C0
Right Adjacent 1
#C0C0C0
Right Adjacent 2
#C0C0C0

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#C0C0C0
Complementary
#C0C0C0

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#C0C0C0
Secondary
#C0C0C0
Tertiary
#C0C0C0

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#C0C0C0
Right 90°
#C0C0C0
Complementary
#C0C0C0
Left 90°
#C0C0C0

Tetradic

Two pairs of complementary colors

4 colors
Main
#C0C0C0
Secondary
#C0C0C0
Complementary
#C0C0C0
Complementary Secondary
#C0C0C0

Split Complementary

Complementary colors ±30°

3 colors
Main
#C0C0C0
Split Left
#C0C0C0
Split Right
#C0C0C0

Cyclic

Circular gradient for periodic data

8 colors
#C0C0C0
45°
#C0C0C0
90°
#C0C0C0
135°
#C0C0C0
180°
#C0C0C0
225°
#C0C0C0
270°
#C0C0C0
315°
#C0C0C0

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Rose Gold

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#FEECEE
Light
#E8C1C6
Medium Light
#D0979E
Medium
#B76E79
Medium Dark
#8A525B
Dark
#5F383E
Darkest
#372023

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#B76E79
Left Dark
#C88F96
Left Medium
#D8B0B5
Left Light
#E7D2D5
Neutral
#F5F5F5
Right Light
#D4E6E2
Right Medium
#B3D6D0
Right Dark
#91C7BE
Complementary End
#6EB7AC

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#DDB5BA
Medium
#B76E79
Dark
#6C2B38
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#AC6EB7
Left Adjacent 1
#B76E9D
Main
#B76E79
Right Adjacent 1
#B7886E
Right Adjacent 2
#B7AC6E

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#B76E79
Complementary
#6EB7AC

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#B76E79
Secondary
#79B76E
Tertiary
#6E79B7

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#B76E79
Right 90°
#9DB76E
Complementary
#6EB7AC
Left 90°
#886EB7

Tetradic

Two pairs of complementary colors

4 colors
Main
#B76E79
Secondary
#B7AC6E
Complementary
#6EB7AC
Complementary Secondary
#6E79B7

Split Complementary

Complementary colors ±30°

3 colors
Main
#B76E79
Split Left
#6EB788
Split Right
#6E9DB7

Cyclic

Circular gradient for periodic data

8 colors
#B76E79
45°
#B79A6E
90°
#9DB76E
135°
#6EB775
180°
#6EB7AC
225°
#6E8BB7
270°
#886EB7
315°
#B76EB0

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAABAD
Pastel 1
#C3B6B8
Pastel 2
#CDC1C3
Pastel 3
#D6CCCE
Pastel 4
#DFD8D9
Deep Pastel
#E8E3E4

Copper

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F4DAC1
Light
#E3B790
Medium Light
#CF9461
Medium
#B87333
Medium Dark
#7D5028
Dark
#462F1C
Darkest
#14100E

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#B87333
Left Dark
#CC9262
Left Medium
#DDB291
Left Light
#EBD3C2
Neutral
#F5F5F5
Right Light
#CAD4E6
Right Medium
#9EB4D7
Right Dark
#6F95C7
Complementary End
#3378B8

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#E2B796
Medium
#B87333
Dark
#6A3100
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#B83378
Left Adjacent 1
#B83336
Main
#B87333
Right Adjacent 1
#B8B533
Right Adjacent 2
#78B833

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#B87333
Complementary
#3378B8

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#B87333
Secondary
#33B873
Tertiary
#7333B8

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#B87333
Right 90°
#35B833
Complementary
#3378B8
Left 90°
#B533B8

Tetradic

Two pairs of complementary colors

4 colors
Main
#B87333
Secondary
#78B833
Complementary
#3378B8
Complementary Secondary
#7333B8

Split Complementary

Complementary colors ±30°

3 colors
Main
#B87333
Split Left
#33B8B6
Split Right
#3335B8

Cyclic

Circular gradient for periodic data

8 colors
#B87333
45°
#99B833
90°
#35B833
135°
#33B894
180°
#3378B8
225°
#5233B8
270°
#B533B8
315°
#B83357

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BFB2A6
Pastel 1
#C8BCB1
Pastel 2
#D0C7BD
Pastel 3
#D9D1C9
Pastel 4
#E1DBD5
Deep Pastel
#EAE5E1

Bronze

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F9E5CF
Light
#EFC29A
Medium Light
#E0A066
Medium
#CD7F32
Medium Dark
#915B28
Dark
#59391D
Darkest
#261A11

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#CD7F32
Left Dark
#DC9C63
Left Medium
#E8B992
Left Light
#F1D7C3
Neutral
#F5F5F5
Right Light
#CCD6EB
Right Medium
#A1B8E2
Right Dark
#729CD7
Complementary End
#3280CD

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#EDBD97
Medium
#CD7F32
Dark
#743600
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#CD3280
Left Adjacent 1
#CD3232
Main
#CD7F32
Right Adjacent 1
#CDCD32
Right Adjacent 2
#80CD32

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#CD7F32
Complementary
#3280CD

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#CD7F32
Secondary
#32CD7F
Tertiary
#7F32CD

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#CD7F32
Right 90°
#32CD32
Complementary
#3280CD
Left 90°
#CC32CD

Tetradic

Two pairs of complementary colors

4 colors
Main
#CD7F32
Secondary
#80CD32
Complementary
#3280CD
Complementary Secondary
#7F32CD

Split Complementary

Complementary colors ±30°

3 colors
Main
#CD7F32
Split Left
#32CDCC
Split Right
#3232CD

Cyclic

Circular gradient for periodic data

8 colors
#CD7F32
45°
#A7CD32
90°
#32CD32
135°
#32CDA6
180°
#3280CD
225°
#5832CD
270°
#CC32CD
315°
#CD3259

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#C0B2A5
Pastel 1
#C9BDB1
Pastel 2
#D1C7BD
Pastel 3
#D9D1C9
Pastel 4
#E2DBD5
Deep Pastel
#EAE5E1

Chrome

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F2F2F2
Light
#E8E8E8
Medium Light
#DEDEDE
Medium
#D4D4D4
Medium Dark
#B1B1B1
Dark
#8F8F8F
Darkest
#6E6E6E

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#D4D4D4
Left Dark
#DCDCDC
Left Medium
#E4E4E4
Left Light
#EDEDED
Neutral
#F5F5F5
Right Light
#EDEDED
Right Medium
#E4E4E4
Right Dark
#DCDCDC
Complementary End
#D4D4D4

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#E9E9E9
Medium
#D4D4D4
Dark
#646464
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#D4D4D4
Left Adjacent 1
#D4D4D4
Main
#D4D4D4
Right Adjacent 1
#D4D4D4
Right Adjacent 2
#D4D4D4

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#D4D4D4
Complementary
#D4D4D4

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#D4D4D4
Secondary
#D4D4D4
Tertiary
#D4D4D4

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#D4D4D4
Right 90°
#D4D4D4
Complementary
#D4D4D4
Left 90°
#D4D4D4

Tetradic

Two pairs of complementary colors

4 colors
Main
#D4D4D4
Secondary
#D4D4D4
Complementary
#D4D4D4
Complementary Secondary
#D4D4D4

Split Complementary

Complementary colors ±30°

3 colors
Main
#D4D4D4
Split Left
#D4D4D4
Split Right
#D4D4D4

Cyclic

Circular gradient for periodic data

8 colors
#D4D4D4
45°
#D4D4D4
90°
#D4D4D4
135°
#D4D4D4
180°
#D4D4D4
225°
#D4D4D4
270°
#D4D4D4
315°
#D4D4D4

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Platinum

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F3F2F2
Light
#EEEEEC
Medium Light
#EAE9E7
Medium
#E5E4E2
Medium Dark
#C3C2BF
Dark
#A2A09D
Darkest
#82807D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#E5E4E2
Left Dark
#E9E8E7
Left Medium
#EDECEB
Left Light
#F1F1F0
Neutral
#F5F5F5
Right Light
#F0F0F1
Right Medium
#EBECED
Right Dark
#E7E7E9
Complementary End
#E2E3E5

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#F2F1F0
Medium
#E5E4E2
Dark
#6C6B69
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#E5E2E3
Left Adjacent 1
#E5E3E2
Main
#E5E4E2
Right Adjacent 1
#E4E5E2
Right Adjacent 2
#E3E5E2

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#E5E4E2
Complementary
#E2E3E5

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#E5E4E2
Secondary
#E2E5E4
Tertiary
#E4E2E5

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#E5E4E2
Right 90°
#E2E5E3
Complementary
#E2E3E5
Left 90°
#E5E2E4

Tetradic

Two pairs of complementary colors

4 colors
Main
#E5E4E2
Secondary
#E3E5E2
Complementary
#E2E3E5
Complementary Secondary
#E4E2E5

Split Complementary

Complementary colors ±30°

3 colors
Main
#E5E4E2
Split Left
#E2E4E5
Split Right
#E3E2E5

Cyclic

Circular gradient for periodic data

8 colors
#E5E4E2
45°
#E4E5E2
90°
#E2E5E3
135°
#E2E5E5
180°
#E2E3E5
225°
#E3E2E5
270°
#E5E2E4
315°
#E5E2E2

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAB5AB
Pastel 1
#C3BFB6
Pastel 2
#CDC9C1
Pastel 3
#D6D3CD
Pastel 4
#DFDCD8
Deep Pastel
#E8E6E3

Gunmetal

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#849FAB
Light
#657A83
Medium Light
#47565C
Medium
#2C3539
Medium Dark
#22282B
Dark
#181B1D
Darkest
#0B0D0E

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#2C3539
Left Dark
#596063
Left Medium
#8A8F91
Left Light
#BEC1C2
Neutral
#F5F5F5
Right Light
#C2BFBE
Right Medium
#928C89
Right Dark
#645C59
Complementary End
#39302C

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#8E9396
Medium
#2C3539
Dark
#161E22
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#2C3930
Left Adjacent 1
#2C3937
Main
#2C3539
Right Adjacent 1
#2C2F39
Right Adjacent 2
#302C39

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#2C3539
Complementary
#39302C

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#2C3539
Secondary
#392C35
Tertiary
#35392C

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#2C3539
Right 90°
#372C39
Complementary
#39302C
Left 90°
#2F392C

Tetradic

Two pairs of complementary colors

4 colors
Main
#2C3539
Secondary
#302C39
Complementary
#39302C
Complementary Secondary
#35392C

Split Complementary

Complementary colors ±30°

3 colors
Main
#2C3539
Split Left
#392C2F
Split Right
#39372C

Cyclic

Circular gradient for periodic data

8 colors
#2C3539
45°
#2D2C39
90°
#372C39
135°
#392C32
180°
#39302C
225°
#38392C
270°
#2F392C
315°
#2C3933

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABB5BA
Pastel 1
#B6BFC3
Pastel 2
#C1C9CD
Pastel 3
#CDD3D6
Pastel 4
#D8DDDF
Deep Pastel
#E3E6E8

Brass

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F0ECCD
Light
#DED49F
Medium Light
#CABD71
Medium
#B5A642
Medium Dark
#7F7432
Dark
#4C4622
Darkest
#1F1D12

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#B5A642
Left Dark
#C8B96F
Left Medium
#D8CC9B
Left Light
#E8E0C8
Neutral
#F5F5F5
Right Light
#CCC9E6
Right Medium
#A29FD6
Right Dark
#7677C6
Complementary End
#4251B5

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#DDD1A0
Medium
#B5A642
Dark
#585100
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#B54251
Left Adjacent 1
#B56D42
Main
#B5A642
Right Adjacent 1
#8BB542
Right Adjacent 2
#51B542

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#B5A642
Complementary
#4251B5

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#B5A642
Secondary
#42B5A6
Tertiary
#A642B5

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#B5A642
Right 90°
#42B56D
Complementary
#4251B5
Left 90°
#B5428A

Tetradic

Two pairs of complementary colors

4 colors
Main
#B5A642
Secondary
#51B542
Complementary
#4251B5
Complementary Secondary
#A642B5

Split Complementary

Complementary colors ±30°

3 colors
Main
#B5A642
Split Left
#428BB5
Split Right
#6D42B5

Cyclic

Circular gradient for periodic data

8 colors
#B5A642
45°
#6EB542
90°
#42B56D
135°
#42A7B5
180°
#4251B5
225°
#8942B5
270°
#B5428A
315°
#B55042

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BDBAA8
Pastel 1
#C6C4B3
Pastel 2
#CFCDBF
Pastel 3
#D8D6CB
Pastel 4
#E0DFD6
Deep Pastel
#E9E8E2

Pewter

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F7EEF0
Light
#D2CBCD
Medium Light
#ADAAAB
Medium
#8A8A8A
Medium Dark
#666666
Dark
#434343
Darkest
#242424

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#8A8A8A
Left Dark
#A4A4A4
Left Medium
#BEBEBE
Left Light
#D9D9D9
Neutral
#F5F5F5
Right Light
#D9D9D9
Right Medium
#BEBEBE
Right Dark
#A4A4A4
Complementary End
#8A8A8A

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#C3C3C3
Medium
#8A8A8A
Dark
#444444
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#8A8A8A
Left Adjacent 1
#8A8A8A
Main
#8A8A8A
Right Adjacent 1
#8A8A8A
Right Adjacent 2
#8A8A8A

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#8A8A8A
Complementary
#8A8A8A

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#8A8A8A
Secondary
#8A8A8A
Tertiary
#8A8A8A

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#8A8A8A
Right 90°
#8A8A8A
Complementary
#8A8A8A
Left 90°
#8A8A8A

Tetradic

Two pairs of complementary colors

4 colors
Main
#8A8A8A
Secondary
#8A8A8A
Complementary
#8A8A8A
Complementary Secondary
#8A8A8A

Split Complementary

Complementary colors ±30°

3 colors
Main
#8A8A8A
Split Left
#8A8A8A
Split Right
#8A8A8A

Cyclic

Circular gradient for periodic data

8 colors
#8A8A8A
45°
#8A8A8A
90°
#8A8A8A
135°
#8A8A8A
180°
#8A8A8A
225°
#8A8A8A
270°
#8A8A8A
315°
#8A8A8A

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Steel

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#D1E5F6
Light
#A5C3E0
Medium Light
#78A2CA
Medium
#4682B4
Medium Dark
#355C7D
Dark
#24384A
Darkest
#12171D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#4682B4
Left Dark
#779DC4
Left Medium
#A3BAD4
Left Light
#CCD7E5
Neutral
#F5F5F5
Right Light
#E8D4C7
Right Medium
#D9B59A
Right Dark
#C89670
Complementary End
#B47846

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#A7BED9
Medium
#4682B4
Dark
#00436F
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#46B478
Left Adjacent 1
#46B4AF
Main
#4682B4
Right Adjacent 1
#464BB4
Right Adjacent 2
#7846B4

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#4682B4
Complementary
#B47846

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#4682B4
Secondary
#B44682
Tertiary
#82B446

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#4682B4
Right 90°
#AF46B4
Complementary
#B47846
Left 90°
#4BB446

Tetradic

Two pairs of complementary colors

4 colors
Main
#4682B4
Secondary
#7846B4
Complementary
#B47846
Complementary Secondary
#82B446

Split Complementary

Complementary colors ±30°

3 colors
Main
#4682B4
Split Left
#B4464B
Split Right
#B4AF46

Cyclic

Circular gradient for periodic data

8 colors
#4682B4
45°
#5D46B4
90°
#AF46B4
135°
#B44666
180°
#B47846
225°
#9EB446
270°
#4BB446
315°
#46B493

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#A8B3BD
Pastel 1
#B4BDC5
Pastel 2
#BFC8CE
Pastel 3
#CBD2D7
Pastel 4
#D7DCE0
Deep Pastel
#E2E6E9

White Gold

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#E5E5FF
Light
#ECECFF
Medium Light
#F2F2FF
Medium
#F8F8FF
Medium Dark
#CAB4FF
Dark
#9272FE
Darkest
#332EFA

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#F8F8FF
Left Dark
#F7F7FC
Left Medium
#F7F6FA
Left Light
#F6F6F7
Neutral
#F5F5F5
Right Light
#F8F7F6
Right Medium
#FAFAF7
Right Dark
#FDFCF7
Complementary End
#FFFFF8

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#FCFBFF
Medium
#F8F8FF
Dark
#74747A
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#F8FFFF
Left Adjacent 1
#F8FCFF
Main
#F8F8FF
Right Adjacent 1
#FCF8FF
Right Adjacent 2
#FFF8FF

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#F8F8FF
Complementary
#FFFFF8

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#F8F8FF
Secondary
#FFF8F8
Tertiary
#F8FFF8

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#F8F8FF
Right 90°
#FFF8FC
Complementary
#FFFFF8
Left 90°
#F8FFFC

Tetradic

Two pairs of complementary colors

4 colors
Main
#F8F8FF
Secondary
#FFF8FF
Complementary
#FFFFF8
Complementary Secondary
#F8FFF8

Split Complementary

Complementary colors ±30°

3 colors
Main
#F8F8FF
Split Left
#FFFCF8
Split Right
#FCFFF8

Cyclic

Circular gradient for periodic data

8 colors
#F8F8FF
45°
#FDF8FF
90°
#FFF8FC
135°
#FFFAF8
180°
#FFFFF8
225°
#FAFFF8
270°
#F8FFFC
315°
#F8FDFF

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#9C9CC9
Pastel 1
#A9A9D1
Pastel 2
#B6B6D8
Pastel 3
#C3C3DF
Pastel 4
#D1D1E6
Deep Pastel
#DEDEED

Titanium

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#ECEBE3
Light
#C9C8C1
Medium Light
#A8A6A0
Medium
#878681
Medium Dark
#62615E
Dark
#3F3E3D
Darkest
#1E1E1E

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#878681
Left Dark
#A1A19D
Left Medium
#BDBCB9
Left Light
#D8D8D7
Neutral
#F5F5F5
Right Light
#D7D7D8
Right Medium
#B9BABC
Right Dark
#9D9DA1
Complementary End
#818287

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#C1C1BE
Medium
#878681
Dark
#43423E
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#878182
Left Adjacent 1
#878381
Main
#878681
Right Adjacent 1
#858781
Right Adjacent 2
#828781

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#878681
Complementary
#818287

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#878681
Secondary
#818786
Tertiary
#868187

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#878681
Right 90°
#818783
Complementary
#818287
Left 90°
#878185

Tetradic

Two pairs of complementary colors

4 colors
Main
#878681
Secondary
#828781
Complementary
#818287
Complementary Secondary
#868187

Split Complementary

Complementary colors ±30°

3 colors
Main
#878681
Split Left
#818587
Split Right
#838187

Cyclic

Circular gradient for periodic data

8 colors
#878681
45°
#848781
90°
#818783
135°
#818687
180°
#818287
225°
#848187
270°
#878185
315°
#878281

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAB8AB
Pastel 1
#C3C1B6
Pastel 2
#CDCBC1
Pastel 3
#D6D4CD
Pastel 4
#DFDED8
Deep Pastel
#E8E7E3

Nickel

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#D5DBD5
Light
#B3B7B3
Medium Light
#929592
Medium
#727472
Medium Dark
#4E4F4E
Dark
#2D2E2D
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#727472
Left Dark
#919391
Left Medium
#B1B2B1
Left Light
#D3D3D3
Neutral
#F5F5F5
Right Light
#D3D3D3
Right Medium
#B2B1B2
Right Dark
#939193
Complementary End
#747274

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#B6B7B6
Medium
#727472
Dark
#383A38
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#747472
Left Adjacent 1
#737472
Main
#727472
Right Adjacent 1
#727473
Right Adjacent 2
#727474

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#727472
Complementary
#747274

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#727472
Secondary
#727274
Tertiary
#747272

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#727472
Right 90°
#727374
Complementary
#747274
Left 90°
#747372

Tetradic

Two pairs of complementary colors

4 colors
Main
#727472
Secondary
#727474
Complementary
#747274
Complementary Secondary
#747272

Split Complementary

Complementary colors ±30°

3 colors
Main
#727472
Split Left
#737274
Split Right
#747273

Cyclic

Circular gradient for periodic data

8 colors
#727472
45°
#727474
90°
#727374
135°
#737274
180°
#747274
225°
#747273
270°
#747372
315°
#747472

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABBAAB
Pastel 1
#B6C3B6
Pastel 2
#C1CDC1
Pastel 3
#CDD6CD
Pastel 4
#D8DFD8
Deep Pastel
#E3E8E3

Aluminum

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#E6EEF3
Light
#C4CACE
Medium Light
#A3A8AB
Medium
#848789
Medium Dark
#606264
Dark
#3F4041
Darkest
#212121

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#848789
Left Dark
#9FA1A3
Left Medium
#BBBCBE
Left Light
#D8D8D9
Neutral
#F5F5F5
Right Light
#D9D8D8
Right Medium
#BEBCBB
Right Dark
#A3A19F
Complementary End
#898684

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#C0C1C2
Medium
#848789
Dark
#404344
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#848986
Left Adjacent 1
#848989
Main
#848789
Right Adjacent 1
#848589
Right Adjacent 2
#868489

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#848789
Complementary
#898684

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#848789
Secondary
#898487
Tertiary
#878984

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#848789
Right 90°
#898489
Complementary
#898684
Left 90°
#858984

Tetradic

Two pairs of complementary colors

4 colors
Main
#848789
Secondary
#868489
Complementary
#898684
Complementary Secondary
#878984

Split Complementary

Complementary colors ±30°

3 colors
Main
#848789
Split Left
#898485
Split Right
#898984

Cyclic

Circular gradient for periodic data

8 colors
#848789
45°
#858489
90°
#898489
135°
#898486
180°
#898684
225°
#888984
270°
#858984
315°
#848987

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABB4BA
Pastel 1
#B6BEC3
Pastel 2
#C1C8CD
Pastel 3
#CDD2D6
Pastel 4
#D8DCDF
Deep Pastel
#E3E6E8

Iron

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#C7BEC0
Light
#A19B9D
Medium Light
#7D7A7A
Medium
#5A5A5A
Medium Dark
#3F3F3F
Dark
#262626
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#5A5A5A
Left Dark
#7E7E7E
Left Medium
#A4A4A4
Left Light
#CCCCCC
Neutral
#F5F5F5
Right Light
#CCCCCC
Right Medium
#A4A4A4
Right Dark
#7E7E7E
Complementary End
#5A5A5A

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#A9A9A9
Medium
#5A5A5A
Dark
#2E2E2E
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#5A5A5A
Left Adjacent 1
#5A5A5A
Main
#5A5A5A
Right Adjacent 1
#5A5A5A
Right Adjacent 2
#5A5A5A

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#5A5A5A
Complementary
#5A5A5A

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#5A5A5A
Secondary
#5A5A5A
Tertiary
#5A5A5A

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#5A5A5A
Right 90°
#5A5A5A
Complementary
#5A5A5A
Left 90°
#5A5A5A

Tetradic

Two pairs of complementary colors

4 colors
Main
#5A5A5A
Secondary
#5A5A5A
Complementary
#5A5A5A
Complementary Secondary
#5A5A5A

Split Complementary

Complementary colors ±30°

3 colors
Main
#5A5A5A
Split Left
#5A5A5A
Split Right
#5A5A5A

Cyclic

Circular gradient for periodic data

8 colors
#5A5A5A
45°
#5A5A5A
90°
#5A5A5A
135°
#5A5A5A
180°
#5A5A5A
225°
#5A5A5A
270°
#5A5A5A
315°
#5A5A5A

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Zinc

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F1F2F4
Light
#E0E2E6
Medium Light
#CFD2D8
Medium
#BEC2CB
Medium Dark
#9A9EA7
Dark
#787B84
Darkest
#575A63

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#BEC2CB
Left Dark
#CCCFD5
Left Medium
#D9DBE0
Left Light
#E7E8EA
Neutral
#F5F5F5
Right Light
#EAE9E7
Right Medium
#E0DED9
Right Dark
#D5D2CC
Complementary End
#CBC7BE

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#DEE0E5
Medium
#BEC2CB
Dark
#595C64
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#BECBC7
Left Adjacent 1
#BEC8CB
Main
#BEC2CB
Right Adjacent 1
#C1BECB
Right Adjacent 2
#C7BECB

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#BEC2CB
Complementary
#CBC7BE

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#BEC2CB
Secondary
#CBBEC2
Tertiary
#C2CBBE

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#BEC2CB
Right 90°
#CBBEC8
Complementary
#CBC7BE
Left 90°
#BECBC1

Tetradic

Two pairs of complementary colors

4 colors
Main
#BEC2CB
Secondary
#C7BECB
Complementary
#CBC7BE
Complementary Secondary
#C2CBBE

Split Complementary

Complementary colors ±30°

3 colors
Main
#BEC2CB
Split Left
#CBC0BE
Split Right
#C8CBBE

Cyclic

Circular gradient for periodic data

8 colors
#BEC2CB
45°
#C4BECB
90°
#CBBEC8
135°
#CBBEBF
180°
#CBC7BE
225°
#C5CBBE
270°
#BECBC1
315°
#BECBCA

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABB0BA
Pastel 1
#B6BAC3
Pastel 2
#C1C5CD
Pastel 3
#CDCFD6
Pastel 4
#D8DADF
Deep Pastel
#E3E5E8

Lead

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#AAA1A3
Light
#837E7F
Medium Light
#5F5C5D
Medium
#3D3D3D
Medium Dark
#2D2D2D
Dark
#1D1D1D
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#3D3D3D
Left Dark
#676767
Left Medium
#949494
Left Light
#C3C3C3
Neutral
#F5F5F5
Right Light
#C3C3C3
Right Medium
#949494
Right Dark
#676767
Complementary End
#3D3D3D

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#989898
Medium
#3D3D3D
Dark
#212121
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#3D3D3D
Left Adjacent 1
#3D3D3D
Main
#3D3D3D
Right Adjacent 1
#3D3D3D
Right Adjacent 2
#3D3D3D

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#3D3D3D
Complementary
#3D3D3D

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#3D3D3D
Secondary
#3D3D3D
Tertiary
#3D3D3D

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#3D3D3D
Right 90°
#3D3D3D
Complementary
#3D3D3D
Left 90°
#3D3D3D

Tetradic

Two pairs of complementary colors

4 colors
Main
#3D3D3D
Secondary
#3D3D3D
Complementary
#3D3D3D
Complementary Secondary
#3D3D3D

Split Complementary

Complementary colors ±30°

3 colors
Main
#3D3D3D
Split Left
#3D3D3D
Split Right
#3D3D3D

Cyclic

Circular gradient for periodic data

8 colors
#3D3D3D
45°
#3D3D3D
90°
#3D3D3D
135°
#3D3D3D
180°
#3D3D3D
225°
#3D3D3D
270°
#3D3D3D
315°
#3D3D3D

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Tungsten

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#DCD3D5
Light
#B6B0B2
Medium Light
#928F90
Medium
#6F6F6F
Medium Dark
#4C4C4C
Dark
#2C2C2C
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#6F6F6F
Left Dark
#8F8F8F
Left Medium
#B0B0B0
Left Light
#D2D2D2
Neutral
#F5F5F5
Right Light
#D2D2D2
Right Medium
#B0B0B0
Right Dark
#8F8F8F
Complementary End
#6F6F6F

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#B4B4B4
Medium
#6F6F6F
Dark
#383838
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#6F6F6F
Left Adjacent 1
#6F6F6F
Main
#6F6F6F
Right Adjacent 1
#6F6F6F
Right Adjacent 2
#6F6F6F

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#6F6F6F
Complementary
#6F6F6F

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#6F6F6F
Secondary
#6F6F6F
Tertiary
#6F6F6F

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#6F6F6F
Right 90°
#6F6F6F
Complementary
#6F6F6F
Left 90°
#6F6F6F

Tetradic

Two pairs of complementary colors

4 colors
Main
#6F6F6F
Secondary
#6F6F6F
Complementary
#6F6F6F
Complementary Secondary
#6F6F6F

Split Complementary

Complementary colors ±30°

3 colors
Main
#6F6F6F
Split Left
#6F6F6F
Split Right
#6F6F6F

Cyclic

Circular gradient for periodic data

8 colors
#6F6F6F
45°
#6F6F6F
90°
#6F6F6F
135°
#6F6F6F
180°
#6F6F6F
225°
#6F6F6F
270°
#6F6F6F
315°
#6F6F6F

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Graphite

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#A59C9E
Light
#7E797A
Medium Light
#5A5758
Medium
#383838
Medium Dark
#2A2A2A
Dark
#1C1C1C
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#383838
Left Dark
#636363
Left Medium
#919191
Left Light
#C2C2C2
Neutral
#F5F5F5
Right Light
#C2C2C2
Right Medium
#919191
Right Dark
#636363
Complementary End
#383838

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#959595
Medium
#383838
Dark
#1F1F1F
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#383838
Left Adjacent 1
#383838
Main
#383838
Right Adjacent 1
#383838
Right Adjacent 2
#383838

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#383838
Complementary
#383838

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#383838
Secondary
#383838
Tertiary
#383838

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#383838
Right 90°
#383838
Complementary
#383838
Left 90°
#383838

Tetradic

Two pairs of complementary colors

4 colors
Main
#383838
Secondary
#383838
Complementary
#383838
Complementary Secondary
#383838

Split Complementary

Complementary colors ±30°

3 colors
Main
#383838
Split Left
#383838
Split Right
#383838

Cyclic

Circular gradient for periodic data

8 colors
#383838
45°
#383838
90°
#383838
135°
#383838
180°
#383838
225°
#383838
270°
#383838
315°
#383838

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Antique Gold

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F9F3D8
Light
#EEDEA5
Medium Light
#E0C972
Medium
#CFB53B
Medium Dark
#96842E
Dark
#615520
Darkest
#312B13

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#CFB53B
Left Dark
#DCC46D
Left Medium
#E7D49A
Left Light
#EFE4C7
Neutral
#F5F5F5
Right Light
#CECAED
Right Medium
#A5A1E3
Right Dark
#787ADA
Complementary End
#3B55CF

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#ECD99F
Medium
#CFB53B
Dark
#665700
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#CF3B55
Left Adjacent 1
#CF6B3B
Main
#CFB53B
Right Adjacent 1
#9FCF3B
Right Adjacent 2
#55CF3B

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#CFB53B
Complementary
#3B55CF

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#CFB53B
Secondary
#3BCFB5
Tertiary
#B53BCF

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#CFB53B
Right 90°
#3BCF6B
Complementary
#3B55CF
Left 90°
#CF3B9F

Tetradic

Two pairs of complementary colors

4 colors
Main
#CFB53B
Secondary
#55CF3B
Complementary
#3B55CF
Complementary Secondary
#B53BCF

Split Complementary

Complementary colors ±30°

3 colors
Main
#CFB53B
Split Left
#3B9FCF
Split Right
#6B3BCF

Cyclic

Circular gradient for periodic data

8 colors
#CFB53B
45°
#7ACF3B
90°
#3BCF6B
135°
#3BC4CF
180°
#3B55CF
225°
#903BCF
270°
#CF3B9F
315°
#CF463B

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#C0BCA5
Pastel 1
#C9C5B1
Pastel 2
#D1CEBD
Pastel 3
#D9D7C9
Pastel 4
#E2E0D5
Deep Pastel
#EAE9E1

Dark Silver

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#D9D5CE
Light
#B5B2AD
Medium Light
#92908D
Medium
#71706E
Medium Dark
#4D4D4C
Dark
#2D2C2C
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#71706E
Left Dark
#908F8E
Left Medium
#B1B0AF
Left Light
#D2D2D1
Neutral
#F5F5F5
Right Light
#D1D2D2
Right Medium
#AFB0B1
Right Dark
#8E8F90
Complementary End
#6E6F71

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#B5B5B4
Medium
#71706E
Dark
#393836
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#716E6F
Left Adjacent 1
#716E6E
Main
#71706E
Right Adjacent 1
#71716E
Right Adjacent 2
#6F716E

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#71706E
Complementary
#6E6F71

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#71706E
Secondary
#6E7170
Tertiary
#706E71

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#71706E
Right 90°
#6E716E
Complementary
#6E6F71
Left 90°
#716E71

Tetradic

Two pairs of complementary colors

4 colors
Main
#71706E
Secondary
#6F716E
Complementary
#6E6F71
Complementary Secondary
#706E71

Split Complementary

Complementary colors ±30°

3 colors
Main
#71706E
Split Left
#6E7171
Split Right
#6E6E71

Cyclic

Circular gradient for periodic data

8 colors
#71706E
45°
#70716E
90°
#6E716E
135°
#6E7171
180°
#6E6F71
225°
#6F6E71
270°
#716E71
315°
#716E6E

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAB5AB
Pastel 1
#C3BFB6
Pastel 2
#CDC9C1
Pastel 3
#D6D3CD
Pastel 4
#DFDCD8
Deep Pastel
#E8E6E3

Copper Rose

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F2DEDE
Light
#D5B5B4
Medium Light
#B78D8C
Medium
#996666
Medium Dark
#6B4A49
Dark
#412F2F
Darkest
#1A1616

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#996666
Left Dark
#B18888
Left Medium
#C8ABAB
Left Light
#DFD0CF
Neutral
#F5F5F5
Right Light
#D1DDDD
Right Medium
#ADC6C6
Right Dark
#8AAFAF
Complementary End
#669999

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#CDB0AF
Medium
#996666
Dark
#592D2E
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#996699
Left Adjacent 1
#996680
Main
#996666
Right Adjacent 1
#998066
Right Adjacent 2
#999966

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#996666
Complementary
#669999

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#996666
Secondary
#669966
Tertiary
#666699

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#996666
Right 90°
#809966
Complementary
#669999
Left 90°
#7F6699

Tetradic

Two pairs of complementary colors

4 colors
Main
#996666
Secondary
#999966
Complementary
#669999
Complementary Secondary
#666699

Split Complementary

Complementary colors ±30°

3 colors
Main
#996666
Split Left
#669980
Split Right
#667F99

Cyclic

Circular gradient for periodic data

8 colors
#996666
45°
#998C66
90°
#809966
135°
#669973
180°
#669999
225°
#667399
270°
#7F6699
315°
#99668C

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAABAB
Pastel 1
#C3B6B6
Pastel 2
#CDC1C1
Pastel 3
#D6CDCD
Pastel 4
#DFD8D8
Deep Pastel
#E8E3E3

Oil Rubbed Bronze

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#AC9191
Light
#846F6F
Medium Light
#5E4F4F
Medium
#3B3131
Medium Dark
#2C2525
Dark
#1D1919
Darkest
#0E0C0C

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#3B3131
Left Dark
#655D5D
Left Medium
#938D8C
Left Light
#C3BFBF
Neutral
#F5F5F5
Right Light
#C0C3C3
Right Medium
#8D9292
Right Dark
#5D6565
Complementary End
#313B3B

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#979191
Medium
#3B3131
Dark
#241B1B
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#3B313B
Left Adjacent 1
#3B3136
Main
#3B3131
Right Adjacent 1
#3B3631
Right Adjacent 2
#3B3B31

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#3B3131
Complementary
#313B3B

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#3B3131
Secondary
#313B31
Tertiary
#31313B

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#3B3131
Right 90°
#363B31
Complementary
#313B3B
Left 90°
#36313B

Tetradic

Two pairs of complementary colors

4 colors
Main
#3B3131
Secondary
#3B3B31
Complementary
#313B3B
Complementary Secondary
#31313B

Split Complementary

Complementary colors ±30°

3 colors
Main
#3B3131
Split Left
#313B36
Split Right
#31363B

Cyclic

Circular gradient for periodic data

8 colors
#3B3131
45°
#3B3931
90°
#363B31
135°
#313B34
180°
#313B3B
225°
#31343B
270°
#36313B
315°
#3B3139

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BAABAB
Pastel 1
#C3B6B6
Pastel 2
#CDC1C1
Pastel 3
#D6CDCD
Pastel 4
#DFD8D8
Deep Pastel
#E8E3E3

Satin Nickel

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#E6E6E6
Light
#D5D5D5
Medium Light
#C4C4C4
Medium
#B3B3B3
Medium Dark
#8F8F8F
Dark
#6D6D6D
Darkest
#4D4D4D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#B3B3B3
Left Dark
#C3C3C3
Left Medium
#D4D4D4
Left Light
#E4E4E4
Neutral
#F5F5F5
Right Light
#E4E4E4
Right Medium
#D4D4D4
Right Dark
#C3C3C3
Complementary End
#B3B3B3

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#D8D8D8
Medium
#B3B3B3
Dark
#565656
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#B3B3B3
Left Adjacent 1
#B3B3B3
Main
#B3B3B3
Right Adjacent 1
#B3B3B3
Right Adjacent 2
#B3B3B3

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#B3B3B3
Complementary
#B3B3B3

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#B3B3B3
Secondary
#B3B3B3
Tertiary
#B3B3B3

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#B3B3B3
Right 90°
#B3B3B3
Complementary
#B3B3B3
Left 90°
#B3B3B3

Tetradic

Two pairs of complementary colors

4 colors
Main
#B3B3B3
Secondary
#B3B3B3
Complementary
#B3B3B3
Complementary Secondary
#B3B3B3

Split Complementary

Complementary colors ±30°

3 colors
Main
#B3B3B3
Split Left
#B3B3B3
Split Right
#B3B3B3

Cyclic

Circular gradient for periodic data

8 colors
#B3B3B3
45°
#B3B3B3
90°
#B3B3B3
135°
#B3B3B3
180°
#B3B3B3
225°
#B3B3B3
270°
#B3B3B3
315°
#B3B3B3

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Brushed Nickel

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#E0D7D9
Light
#BAB4B6
Medium Light
#969394
Medium
#737373
Medium Dark
#4F4F4F
Dark
#2D2D2D
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#737373
Left Dark
#929292
Left Medium
#B2B2B2
Left Light
#D3D3D3
Neutral
#F5F5F5
Right Light
#D3D3D3
Right Medium
#B2B2B2
Right Dark
#929292
Complementary End
#737373

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#B6B6B6
Medium
#737373
Dark
#3A3A3A
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#737373
Left Adjacent 1
#737373
Main
#737373
Right Adjacent 1
#737373
Right Adjacent 2
#737373

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#737373
Complementary
#737373

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#737373
Secondary
#737373
Tertiary
#737373

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#737373
Right 90°
#737373
Complementary
#737373
Left 90°
#737373

Tetradic

Two pairs of complementary colors

4 colors
Main
#737373
Secondary
#737373
Complementary
#737373
Complementary Secondary
#737373

Split Complementary

Complementary colors ±30°

3 colors
Main
#737373
Split Left
#737373
Split Right
#737373

Cyclic

Circular gradient for periodic data

8 colors
#737373
45°
#737373
90°
#737373
135°
#737373
180°
#737373
225°
#737373
270°
#737373
315°
#737373

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Polished Chrome

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#F0F2F9
Light
#D7D9DF
Medium Light
#BFC1C6
Medium
#A8A9AD
Medium Dark
#858588
Dark
#636365
Darkest
#434343

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#A8A9AD
Left Dark
#BBBBBF
Left Medium
#CECED0
Left Light
#E1E2E3
Neutral
#F5F5F5
Right Light
#E3E2E1
Right Medium
#D0D0CE
Right Dark
#BFBEBB
Complementary End
#ADACA8

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#D3D3D5
Medium
#A8A9AD
Dark
#505155
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#A8ADAC
Left Adjacent 1
#A8ACAD
Main
#A8A9AD
Right Adjacent 1
#AAA8AD
Right Adjacent 2
#ACA8AD

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#A8A9AD
Complementary
#ADACA8

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#A8A9AD
Secondary
#ADA8A9
Tertiary
#A9ADA8

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#A8A9AD
Right 90°
#ADA8AC
Complementary
#ADACA8
Left 90°
#A8ADAA

Tetradic

Two pairs of complementary colors

4 colors
Main
#A8A9AD
Secondary
#ACA8AD
Complementary
#ADACA8
Complementary Secondary
#A9ADA8

Split Complementary

Complementary colors ±30°

3 colors
Main
#A8A9AD
Split Left
#ADAAA8
Split Right
#ACADA8

Cyclic

Circular gradient for periodic data

8 colors
#A8A9AD
45°
#ABA8AD
90°
#ADA8AC
135°
#ADA8A8
180°
#ADACA8
225°
#AAADA8
270°
#A8ADAA
315°
#A8ADAD

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABAEBA
Pastel 1
#B6B9C3
Pastel 2
#C1C4CD
Pastel 3
#CDCED6
Pastel 4
#D8D9DF
Deep Pastel
#E3E4E8

Black Chrome

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#766E70
Light
#504B4C
Medium Light
#2D2B2B
Medium
#0A0A0A
Medium Dark
#0B0B0B
Dark
#0C0C0C
Darkest
#0D0D0D

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#0A0A0A
Left Dark
#3E3E3E
Left Medium
#767676
Left Light
#B3B3B3
Neutral
#F5F5F5
Right Light
#B3B3B3
Right Medium
#767676
Right Dark
#3E3E3E
Complementary End
#0A0A0A

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#7A7A7A
Medium
#0A0A0A
Dark
#050505
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#0A0A0A
Left Adjacent 1
#0A0A0A
Main
#0A0A0A
Right Adjacent 1
#0A0A0A
Right Adjacent 2
#0A0A0A

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#0A0A0A
Complementary
#0A0A0A

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#0A0A0A
Secondary
#0A0A0A
Tertiary
#0A0A0A

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#0A0A0A
Right 90°
#0A0A0A
Complementary
#0A0A0A
Left 90°
#0A0A0A

Tetradic

Two pairs of complementary colors

4 colors
Main
#0A0A0A
Secondary
#0A0A0A
Complementary
#0A0A0A
Complementary Secondary
#0A0A0A

Split Complementary

Complementary colors ±30°

3 colors
Main
#0A0A0A
Split Left
#0A0A0A
Split Right
#0A0A0A

Cyclic

Circular gradient for periodic data

8 colors
#0A0A0A
45°
#0A0A0A
90°
#0A0A0A
135°
#0A0A0A
180°
#0A0A0A
225°
#0A0A0A
270°
#0A0A0A
315°
#0A0A0A

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABABAB
Pastel 1
#B6B6B6
Pastel 2
#C1C1C1
Pastel 3
#CDCDCD
Pastel 4
#D8D8D8
Deep Pastel
#E3E3E3

Patina Copper

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#B1D5CF
Light
#8DB4AD
Medium Light
#6B958D
Medium
#4A766E
Medium Dark
#36514C
Dark
#232F2C
Darkest
#0E0E0E

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#4A766E
Left Dark
#73948E
Left Medium
#9DB4AF
Left Light
#C9D4D1
Neutral
#F5F5F5
Right Light
#D5C8C9
Right Medium
#B59CA0
Right Dark
#967278
Complementary End
#764A52

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#A2B8B4
Medium
#4A766E
Dark
#113E37
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#52764A
Left Adjacent 1
#4A7658
Main
#4A766E
Right Adjacent 1
#4A6876
Right Adjacent 2
#4A5276

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#4A766E
Complementary
#764A52

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#4A766E
Secondary
#6E4A76
Tertiary
#766E4A

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#4A766E
Right 90°
#584A76
Complementary
#764A52
Left 90°
#68764A

Tetradic

Two pairs of complementary colors

4 colors
Main
#4A766E
Secondary
#4A5276
Complementary
#764A52
Complementary Secondary
#766E4A

Split Complementary

Complementary colors ±30°

3 colors
Main
#4A766E
Split Left
#764A68
Split Right
#76584A

Cyclic

Circular gradient for periodic data

8 colors
#4A766E
45°
#4A5D76
90°
#584A76
135°
#764A73
180°
#764A52
225°
#76634A
270°
#68764A
315°
#4A764D

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#ABBAB7
Pastel 1
#B6C3C1
Pastel 2
#C1CDCA
Pastel 3
#CDD6D4
Pastel 4
#D8DFDE
Deep Pastel
#E3E8E7

Antique Brass

🎨

Sequential

Single hue gradient for data visualization

7 colors
Lightest
#FEEFE6
Light
#EFD0BF
Medium Light
#DFB29A
Medium
#CD9575
Medium Dark
#A27358
Dark
#7A533D
Darkest
#533524

Diverging

Dual hue gradient with a neutral midpoint

9 colors
Base End
#CD9575
Left Dark
#D9AC94
Left Medium
#E4C4B3
Left Light
#EDDCD4
Neutral
#F5F5F5
Right Light
#D6E3EB
Right Medium
#B7D0E1
Right Dark
#97BFD7
Complementary End
#75ADCD

Monochromatic

Same hue, different brightness/saturation

5 colors
Lightest
#FFFFFF
Light
#E9C9B8
Medium
#CD9575
Dark
#714327
Darkest
#000000

Analogous

Colors adjacent on the color wheel (30° apart)

5 colors
Left Adjacent 2
#CD75AD
Left Adjacent 1
#CD7581
Main
#CD9575
Right Adjacent 1
#CDC175
Right Adjacent 2
#ADCD75

Complementary

Colors opposite on the color wheel (180° apart)

2 colors
Main
#CD9575
Complementary
#75ADCD

Triadic

Evenly spaced around the color wheel (120° apart)

3 colors
Main
#CD9575
Secondary
#75CD95
Tertiary
#9575CD

Square

Four colors evenly spaced (90° apart)

4 colors
Main
#CD9575
Right 90°
#81CD75
Complementary
#75ADCD
Left 90°
#C175CD

Tetradic

Two pairs of complementary colors

4 colors
Main
#CD9575
Secondary
#ADCD75
Complementary
#75ADCD
Complementary Secondary
#9575CD

Split Complementary

Complementary colors ±30°

3 colors
Main
#CD9575
Split Left
#75CDC1
Split Right
#7581CD

Cyclic

Circular gradient for periodic data

8 colors
#CD9575
45°
#C3CD75
90°
#81CD75
135°
#75CDAB
180°
#75ADCD
225°
#7F75CD
270°
#C175CD
315°
#CD7597

Pastel

Soft, desaturated colors for modern UI

6 colors
Light Pastel
#BDB0A8
Pastel 1
#C6BAB3
Pastel 2
#CFC5BF
Pastel 3
#D8CFCB
Pastel 4
#E0DAD6
Deep Pastel
#E9E5E2

Extract Metallic Color Palette from Image

Upload a photo to extract a metallic color palette with HEX and RGB codes.

click or drag your image here
Supported formats: JPG, PNG, WebP

Metallic Color Code Converter

Instantly convert between HEX, RGB, CMYK, and more.

🎨

All Formats:

  • HEX:
    #ECB12E
  • RGB:
    rgb(236, 177, 46)
  • CMYK:
    cmyk(0%, 25%, 81%, 7%)
  • HSV:
    hsv(41°, 81%, 93%)
  • HSL:
    hsl(41°, 83%, 55%)