Your Favorites

Quick Tip: Security

Sharing your Wi-Fi password? Put it in a QR Code so your friends can connect just by scanning it with their phone. Easy and secure!

Enjoying UtilToolkits?

Support our development and help us create more amazing tools!

Buy me a coffee

Color Theme Generator

Name: Color Wheel
Availability: InStock
Rating: 4.8 (1250 reviews)
Author: UtilToolkits

Color Wheel

Base Color

#0D65F2

H 217°
S 90%
L 50%

Settings

Hex Color

Lightness50%

Hue

Saturation (%)

Color Harmony

Extract from Image

Gradient Preview

linear-gradient(90deg, #0df2e7, #0db1f2, #0d65f2, #0d18f2, #4e0df2)

Generated Palette

#0DF2E7RGB(13, 242, 231)

#0DB1F2RGB(13, 177, 242)

#0D65F2RGB(13, 101, 242)

#0D18F2RGB(13, 24, 242)

#4E0DF2RGB(78, 13, 242)

Accessibility Contrast Checker

WCAG contrast ratios between palette colors and white/black text

White Text1.4:1 Fail

Black Text14.9:1 AAA

White Text2.4:1 Fail

Black Text8.6:1 AAA

White Text5.0:1 AA

Black Text4.2:1 AA Large

White Text8.6:1 AAA

Black Text2.4:1 Fail

White Text7.9:1 AAA

Black Text2.7:1 Fail

UI Preview

0DF

0DB

0D6

0D1

4E0

Export

CSS Variables

:root {
  --color-1: #0df2e7;
  --color-2: #0db1f2;
  --color-3: #0d65f2;
  --color-4: #0d18f2;
  --color-5: #4e0df2;
}

SCSS Variables

$color-1: #0df2e7;
$color-2: #0db1f2;
$color-3: #0d65f2;
$color-4: #0d18f2;
$color-5: #4e0df2;

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'palette': {
        '100': '#0df2e7',
        '200': '#0db1f2',
        '300': '#0d65f2',
        '400': '#0d18f2',
        '500': '#4e0df2'
}
      }
    }
  }
}

JSON Export

[
  "#0df2e7",
  "#0db1f2",
  "#0d65f2",
  "#0d18f2",
  "#4e0df2"
]

Share This Palette

Copy and share this URL to share your exact palette with others - no login required!

More Color Tools

Contrast Checker

Check color contrast accessibility (WCAG).

Try Now

Complementary Color Palette Generator

Generate beautiful color palettes from a base color including complementary, hex, and harmonious schemes.

Try Now

CSS Color Code Converter

Convert between HEX/HEXA, RGB/RGBA, HSL/HSLA, and CSS color keywords.

Try Now

About this Tool

Visually design your next color palette with our interactive Color Wheel. Drag the picker to find your perfect base color, then choose from a variety of classic color harmony rules—like complementary, triadic, or analogous—to instantly generate a full theme. It's the most intuitive way to create beautiful, balanced color schemes for your UI, brand, or artwork.

The tool maps the position of the picker on the wheel to HSL (Hue, Saturation, Lightness) values. The angle corresponds to the hue (0-360°), and the distance from the center corresponds to the saturation (0-100%). The different color harmony rules are then applied by mathematically rotating the hue on the wheel.

Drag the picker on the color wheel to select your base hue and saturation.
Use the Lightness slider to fine-tune the brightness.
Select a color harmony rule (like 'Triad' or 'Analogous') from the dropdown.
Your full color palette will be generated instantly.
Copy individual HEX codes, or export the entire palette as CSS variables or JSON.

A UI designer building a theme for a new app by starting with a brand color and finding complementary accents.
A developer exporting a full color palette as CSS variables to quickly theme a website.
An artist exploring triadic color schemes for a new illustration.

Interactive Color Wheel: An intuitive way to explore hues and saturation.
Classic Color Harmonies: Generate palettes with Monochromatic, Analogous, Complementary, Triadic, and more.
Live Swatch Preview: See your full color palette update in real-time.
Export for Devs: One-click export to CSS variables or JSON for easy integration.
100% Private: All calculations happen in your browser.

Color harmony is based on the idea that certain combinations of colors, based on their position on a color wheel, are inherently pleasing. This tool automates the mathematical relationships (like 180° for complementary colors) to make applying color theory simple and fast.

Can I save my palettes?

Currently, you can export the palette as code. A feature to save palettes to your account may be added in the future.

Does this support transparency (alpha)?

This tool focuses on generating solid colors. For transparency, you can use our Color Code Converter to add an alpha channel to your chosen HEX codes.

Is the color wheel perceptually uniform?

No, it uses the standard HSL color model, which is great for intuitive design but is not perceptually uniform (meaning changes in value don't always correspond to how we perceive changes in brightness).

All calculations and data processing for this tool are performed locally in your browser. UtilToolkits does not send any of your data to an external server, ensuring your information remains private and secure.

Credits:Next.js•React•Tailwind CSS•Lucide Icons

Quick Tip: Security

Sharing your Wi-Fi password? Put it in a QR Code so your friends can connect just by scanning it with their phone. Easy and secure!

Color Theme Generator

Color Wheel

Base Color

#0D65F2

H 217°
S 90%
L 50%

Settings

Hex Color

Lightness50%

Hue

Saturation (%)

Color Harmony

Extract from Image

Gradient Preview

linear-gradient(90deg, #0df2e7, #0db1f2, #0d65f2, #0d18f2, #4e0df2)

Generated Palette

#0DF2E7RGB(13, 242, 231)

#0DB1F2RGB(13, 177, 242)

#0D65F2RGB(13, 101, 242)

#0D18F2RGB(13, 24, 242)

#4E0DF2RGB(78, 13, 242)

Accessibility Contrast Checker

WCAG contrast ratios between palette colors and white/black text

White Text1.4:1 Fail

Black Text14.9:1 AAA

White Text2.4:1 Fail

Black Text8.6:1 AAA

White Text5.0:1 AA

Black Text4.2:1 AA Large

White Text8.6:1 AAA

Black Text2.4:1 Fail

White Text7.9:1 AAA

Black Text2.7:1 Fail

UI Preview

0DF

0DB

0D6

0D1

4E0

Export

CSS Variables

:root {
  --color-1: #0df2e7;
  --color-2: #0db1f2;
  --color-3: #0d65f2;
  --color-4: #0d18f2;
  --color-5: #4e0df2;
}

SCSS Variables

$color-1: #0df2e7;
$color-2: #0db1f2;
$color-3: #0d65f2;
$color-4: #0d18f2;
$color-5: #4e0df2;

Tailwind Config

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'palette': {
        '100': '#0df2e7',
        '200': '#0db1f2',
        '300': '#0d65f2',
        '400': '#0d18f2',
        '500': '#4e0df2'
}
      }
    }
  }
}

JSON Export

[
  "#0df2e7",
  "#0db1f2",
  "#0d65f2",
  "#0d18f2",
  "#4e0df2"
]

Share This Palette

Copy and share this URL to share your exact palette with others - no login required!

More Color Tools

Contrast Checker

Check color contrast accessibility (WCAG).

Try Now

Complementary Color Palette Generator

Generate beautiful color palettes from a base color including complementary, hex, and harmonious schemes.

Try Now

CSS Color Code Converter

Convert between HEX/HEXA, RGB/RGBA, HSL/HSLA, and CSS color keywords.

Try Now

About this Tool

Drag the picker on the color wheel to select your base hue and saturation.
Use the Lightness slider to fine-tune the brightness.
Select a color harmony rule (like 'Triad' or 'Analogous') from the dropdown.
Your full color palette will be generated instantly.
Copy individual HEX codes, or export the entire palette as CSS variables or JSON.

A UI designer building a theme for a new app by starting with a brand color and finding complementary accents.
A developer exporting a full color palette as CSS variables to quickly theme a website.
An artist exploring triadic color schemes for a new illustration.

Interactive Color Wheel: An intuitive way to explore hues and saturation.
Classic Color Harmonies: Generate palettes with Monochromatic, Analogous, Complementary, Triadic, and more.
Live Swatch Preview: See your full color palette update in real-time.
Export for Devs: One-click export to CSS variables or JSON for easy integration.
100% Private: All calculations happen in your browser.

Can I save my palettes?

Currently, you can export the palette as code. A feature to save palettes to your account may be added in the future.

Does this support transparency (alpha)?

This tool focuses on generating solid colors. For transparency, you can use our Color Code Converter to add an alpha channel to your chosen HEX codes.

Is the color wheel perceptually uniform?

Credits:Next.js•React•Tailwind CSS•Lucide Icons