Color Picker & Converter
Preview
Pick Color
Enter any CSS color value
Supports hex, rgb, hsl, named colors
Color Values
HEX
#3B82F6
RGB
rgb(59, 130, 246)
HSL
hsl(217, 91%, 60%)
HSV
hsv(217, 76%, 96%)
Recent Colors
Harmony & Palette Generator
Base Color
Harmony Type
Palette Size 5
Saturation Shift 0%
Lightness Shift 0%
Generated Palette
CSS Custom Properties

                                
                            

                        

                    

                

            

            
            
            

                

                    

                        

                            
                            Gradient Generator
                        

                        

                            
                            
                        

                    

                    
                    

                        

                            
                            

                                
Gradient Type

                                
                            

                            
                            

                                
Angle 90°

                                
                            

                            
                            

                                

                                    
Color Stops

                                    
                                

                                

                            

                        

                        
                        

                            
Live Preview

                            

                            
                            

                                
CSS Output

                                

                                
                            

                        

                    

                

            

            
            
            

                

                    

                        

                            
                            Shadow Generator
                        

                        
                    

                    
                    

                        

                            

                                
Base Color

                                

                                    
                                    
                                

                            

                            
                            

                                
Shadow Type

                                
                            

                            
                            

                                

                                    
Intensity 0.25

                                    
                                

                                

                                    
Blur 12px

                                    
                                

                                

                                    
Offset X 0px

                                    
                                

                                

                                    
Offset Y 8px

                                    
                                

                            

                        

                        
                        

                            
Live Preview

                            

                                

                                    Shadow Preview
                                

                            

                            
                            

                                
CSS Box-Shadow

                                

                                
                            

                        

                    

                

            

            
            
            

                

                    

                        

                            
                            Glassmorphism Generator
                        

                        
                    

                    
                    

                        

                            

                                
Glass Color

                                

                                    
                                    
                                

                            

                            
                            

                                
Border Color

                                

                                    
                                    
                                

                            

                            
                            

                                
Background Opacity 12%

                                
                            

                            
                            

                                
Blur Amount 12px

                                
                            

                            
                            

                                
Border Size 1px

                                
                            

                            
                            

                                
Border Style

                                
                            

                        

                        
                        

                            
Live Glassmorphism Preview

                            

                                

                                    

                                        

                                        

                                            
Glass Card

                                            
Beautiful frosted effect

                                        

                                    

                                

                            

                            
                            

                                
CSS Output

                                

                                
                            

                        

                    

                

            

            
            
            

                

                    

                        

                            
                            Color Mixer — Weighted Blend
                        

                        

                            
                            
                        

                    

                    
                    

                        

                            
Colors & Weights (auto-normalized)

                            

                            
                            

                                
                            

                        

                        
                        

                            
Blended Result

                            

                            
                            

                                
Result Values

                                

                                    

                                        HEX
                                        

                                            
                                            
                                        

                                    

                                    

                                        RGB
                                        

                                            
                                            
                                        

                                    

                                

                            

                        

                    

                

            

            
            
            

                

                    

                        

                            
                            Contrast Ratio Checker (WCAG)
                        

                        

                            
                            
                        

                    

                    
                    

                        

                            

                                
Foreground (Text)

                                

                                    
                                    
                                

                            

                            
                            

                                
Background

                                

                                    
                                    
                                

                            

                            
                            

                                
                                
                            

                        

                        
                        

                            
Result

                            
                            

                                

                                    

                                        
Contrast Ratio

                                        
21.00

                                    

                                    

                                        
AA Normal: Pass

                                        
AA Large: Pass

                                    

                                

                            

                            
                            
Preview

                            

                                
The quick brown fox jumps over the lazy dog.

                                
Large Text Example

                            

                        

                    

                

            



            
            

                


    

    

    
Above All 

    
#3a85fe
#fe6200
#374e57
:root{ 
--your-var: #3a85fe; 
--your-var: #fe6200; 
--your-var: #374e57; 
}

    

    

    
Announce 

    
#514193
#fc7742
:root{ 
--your-var: #514193; 
--your-var: #fc7742; 
}

    

    

    
Aqua 

    
#00d1fe
#00c1fe
#a6eeff
:root{ 
--your-var: #00d1fe; 
--your-var: #00c1fe; 
--your-var: #a6eeff; 
}

    

    

    
Authentic 

    
#5fbdf1
#34578f
#3bdec3
:root{ 
--your-var: #5fbdf1; 
--your-var: #34578f; 
--your-var: #3bdec3; 
}

    

    

    
Blue Belle 

    
#d4145a
#0071bc
#01243c
:root{ 
--your-var: #d4145a; 
--your-var: #0071bc; 
--your-var: #01243c; 
}

    

    

    
Blue Steel 

    
#82aada
#3e5b87
#3d3d45
:root{ 
--your-var: #82aada; 
--your-var: #3e5b87; 
--your-var: #3d3d45; 
}

    

    

    
Casino 

    
#e5b363
#414e5b
#e6e6e6
:root{ 
--your-var: #e5b363; 
--your-var: #414e5b; 
--your-var: #e6e6e6; 
}

    

    

    
Chilli Pepper 

    
#1eb716
#f5590c
#160c65
:root{ 
--your-var: #1eb716; 
--your-var: #f5590c; 
--your-var: #160c65; 
}

    

    

    
Citrus 

    
#00d16d
#ffbb22
#002544
:root{ 
--your-var: #00d16d; 
--your-var: #ffbb22; 
--your-var: #002544; 
}

    

    

    
Clean 

    
#05c9d7
#92e14c
#005ba4
:root{ 
--your-var: #05c9d7; 
--your-var: #92e14c; 
--your-var: #005ba4; 
}

    

    

    
Crafty 

    
#6651ac
#f4a134
#0cc6b5
:root{ 
--your-var: #6651ac; 
--your-var: #f4a134; 
--your-var: #0cc6b5; 
}

    

    

    
Dual Blue 

    
#0458c6
#170c66
:root{ 
--your-var: #0458c6; 
--your-var: #170c66; 
}

    

    

    
Elegant 

    
#dbad7b
#75583f
:root{ 
--your-var: #dbad7b; 
--your-var: #75583f; 
}

    

    

    
Elm 

    
#4da03f
#7fd86c
#445142
:root{ 
--your-var: #4da03f; 
--your-var: #7fd86c; 
--your-var: #445142; 
}

    

    

    
Experiment 

    
#2e3192
#d4145a
#00a99d
:root{ 
--your-var: #2e3192; 
--your-var: #d4145a; 
--your-var: #00a99d; 
}

    

    

    
Fluffy 

    
#ffb6c3
#26daf5
#2e88e0
:root{ 
--your-var: #ffb6c3; 
--your-var: #26daf5; 
--your-var: #2e88e0; 
}

    

    

    
Fruity 

    
#d60c4c
#6c3c79
#a9c41f
#f59522
:root{ 
--your-var: #d60c4c; 
--your-var: #6c3c79; 
--your-var: #a9c41f; 
--your-var: #f59522; 
}

    

    

    
Go 

    
#3c2cc0
#8ec63f
#fe4b35
#283851
:root{ 
--your-var: #3c2cc0; 
--your-var: #8ec63f; 
--your-var: #fe4b35; 
--your-var: #283851; 
}

    

    

    
Green Monday 

    
#04b263
#44d883
#1556bc
:root{ 
--your-var: #04b263; 
--your-var: #44d883; 
--your-var: #1556bc; 
}

    

    

    
Growth 

    
#0b9444
#0f75bc
#fcb040
:root{ 
--your-var: #0b9444; 
--your-var: #0f75bc; 
--your-var: #fcb040; 
}

    

    

    
Harvest 

    
#753928
#f1875d
#322c29
:root{ 
--your-var: #753928; 
--your-var: #f1875d; 
--your-var: #322c29; 
}

    

    

    
Hot Take 

    
#f19423
#ee2d34
#353032
:root{ 
--your-var: #f19423; 
--your-var: #ee2d34; 
--your-var: #353032; 
}

    

    

    
Laid Back 

    
#00a99d
#f15a24
#f7931e
:root{ 
--your-var: #00a99d; 
--your-var: #f15a24; 
--your-var: #f7931e; 
}

    

    

    
LateNite 

    
#00ddff
#ff00d4
#1c1c58
:root{ 
--your-var: #00ddff; 
--your-var: #ff00d4; 
--your-var: #1c1c58; 
}

    

    

    
Lucky 

    
#00e3a9
#00c96e
#00733a
:root{ 
--your-var: #00e3a9; 
--your-var: #00c96e; 
--your-var: #00733a; 
}

    

    

    
Magician 

    
#f7941d
#7904aa
#767676
:root{ 
--your-var: #f7941d; 
--your-var: #7904aa; 
--your-var: #767676; 
}

    

    

    
Marlo 

    
#f7486e
#a508c3
#6ee270
:root{ 
--your-var: #f7486e; 
--your-var: #a508c3; 
--your-var: #6ee270; 
}

    

    

    
Maro 

    
#d62222
#20ba18
#170b66
:root{ 
--your-var: #d62222; 
--your-var: #20ba18; 
--your-var: #170b66; 
}

    

    

    
MegaCorp 

    
#4884ca
#784ba6
#1f4284
:root{ 
--your-var: #4884ca; 
--your-var: #784ba6; 
--your-var: #1f4284; 
}

    

    

    
Millisoft 

    
#fd476d
#ffab17
#04cbac
#846bfd
:root{ 
--your-var: #fd476d; 
--your-var: #ffab17; 
--your-var: #04cbac; 
--your-var: #846bfd; 
}

    

    

    
Money Blue 

    
#326277
#0db25f
#8fd2ea
:root{ 
--your-var: #326277; 
--your-var: #0db25f; 
--your-var: #8fd2ea; 
}

    

    

    
Money Manager 

    
#29abe2
#39b54a
#f7931e
#f15a24
:root{ 
--your-var: #29abe2; 
--your-var: #39b54a; 
--your-var: #f7931e; 
--your-var: #f15a24; 
}

    

    

    
Nexus 

    
#22b573
#f15a24
#29abe2
#f7931e
:root{ 
--your-var: #22b573; 
--your-var: #f15a24; 
--your-var: #29abe2; 
--your-var: #f7931e; 
}

    

    

    
Noteworthy 

    
#685aa3
#e94f36
#37120d
:root{ 
--your-var: #685aa3; 
--your-var: #e94f36; 
--your-var: #37120d; 
}

    

    

    
Ocean 

    
#29abe2
#0071bc
#022230
:root{ 
--your-var: #29abe2; 
--your-var: #0071bc; 
--your-var: #022230; 
}

    

    

    
Off Limits 

    
#64b5f6
#1976d2
#22313f
:root{ 
--your-var: #64b5f6; 
--your-var: #1976d2; 
--your-var: #22313f; 
}

    

    

    
On Patrol 

    
#be40d3
#8300b7
#333333
:root{ 
--your-var: #be40d3; 
--your-var: #8300b7; 
--your-var: #333333; 
}

    

    

    
Plum 

    
#7769ad
#43358c
#292056
:root{ 
--your-var: #7769ad; 
--your-var: #43358c; 
--your-var: #292056; 
}

    

    

    
Royal 

    
#4a3a67
#23b18b
#e5b304
:root{ 
--your-var: #4a3a67; 
--your-var: #23b18b; 
--your-var: #e5b304; 
}

    

    

    
Spectrum 

    
#ff187c
#a348ce
#170c66
#f5510c
#fbaa18
:root{ 
--your-var: #ff187c; 
--your-var: #a348ce; 
--your-var: #170c66; 
--your-var: #f5510c; 
--your-var: #fbaa18; 
}

    

    

    
Teal Authority 

    
#36a6a3
#000000
#EEEEEE
:root{ 
--your-var: #36a6a3; 
--your-var: #000000; 
--your-var: #EEEEEE; 
}

    

    

    
Tilo 

    
#3c4b73
#4f4db7
#fb8c70
:root{ 
--your-var: #3c4b73; 
--your-var: #4f4db7; 
--your-var: #fb8c70; 
}

    

    

    
Twister 

    
#000040
#a50088
#00f0f8
:root{ 
--your-var: #000040; 
--your-var: #a50088; 
--your-var: #00f0f8; 
}

    

    

    
Vitamin 

    
#f7941d
#da1c5c
#2aba68
:root{ 
--your-var: #f7941d; 
--your-var: #da1c5c; 
--your-var: #2aba68; 
}

    

    

    
Vivid 

    
#fe9832
#00ccff
#fe0066
#4d4d4d
:root{ 
--your-var: #fe9832; 
--your-var: #00ccff; 
--your-var: #fe0066; 
--your-var: #4d4d4d; 
}

    

    

    
Warmer 

    
#df1166
#f02528
#e9b00b
:root{ 
--your-var: #df1166; 
--your-var: #f02528; 
--your-var: #e9b00b; 
}