Skip to main content
Logo image
Apptastic Coder
Back to all tools
BETA

Color Palette Generator

Create harmonious color palettes and export as Tailwind, CSS vars, or JSON

Generated Palette

#3BDFF6
#3B82F6
#513BF6
#3BF6AF
#AF3BF6

Click any color swatch to copy its hex value

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        'color-1': '#3bdff6',
        'color-2': '#3b82f6',...

CSS Variables

:root {
  --color-1: #3bdff6;
  --color-2: #3b82f6;
  --color-3: #513bf6;
  --color-4: #3bf6af;
  --color-5: #af3bf6;...

JSON Export

{
  "color1": {
    "hex": "#3bdff6",
    "rgb": "rgb(59, 223, 246)",
    "hsl": "hsl(187, 1%, 1%)"
  },...

Color Reference

#HEXRGBHSL
1#3BDFF659, 223, 246187°, 1%, 1%
2#3B82F659, 130, 246217°, 1%, 1%
3#513BF681, 59, 246247°, 1%, 1%
4#3BF6AF59, 246, 175157°, 1%, 1%
5#AF3BF6175, 59, 246277°, 1%, 1%

Relevant posts for this tool

Learn faster with posts connected to this workflow.