Analogous Palette for #2196F3
Analogous colors are adjacent on the color wheel, sharing similar hues. They create harmonious, cohesive designs that feel natural and pleasing to the eye, often found in nature.
Palette Colors
Color 1 (Base)
#20F3E9
rgb(32, 243, 233)
hsl(177, 90%, 54%)
Color 2
#2196F3
rgb(33, 150, 243)
hsl(207, 90%, 54%)
Color 3
#202BF3
rgb(32, 43, 243)
hsl(237, 90%, 54%)
Export as CSS Variables
CSS Custom Properties
:root {
--palette-1: #20F3E9;
--palette-2: #2196F3;
--palette-3: #202BF3;
}Other Harmonies for #2196F3
Frequently Asked Questions
What is a analogous color scheme?▾
Analogous colors are adjacent on the color wheel, sharing similar hues. They create harmonious, cohesive designs that feel natural and pleasing to the eye, often found in nature.
How do I create a analogous palette from #2196F3?▾
Start with your base color #2196F3 and apply the analogous harmony rule. Choose colors 30 degrees to either side on the color wheel. The resulting palette is: #20F3E9, #2196F3, #202BF3.
When should I use a analogous palette?▾
Analogous palettes work great for cohesive, calming designs. Use them for backgrounds, dashboards, and designs that need visual flow.