Color scheme generator

HDR

OKLAB

oklab(58% -0.02 -0.21)

HDR

OKLCH

oklch(58% 0.21 270)

HDR

P3

color(display-p3 0.29 0.43 0.94)

HDR

SRGB

rgb(24% 43% 97%)

SDR

HEX

#3e6ef7

SDR

RGB

rgb(62, 110, 247)

SDR

HSL

hsl(220 92% 61%)

SDR

HWB

hwb(220 24% 3.1%)

SDR

LCH

lch(49.4% 77.7 286)

SDR

LAB

lab(49.4% 21.1 -74.8)

SDR

CMYK

cmyk 75%, 55%, 0%, 3%

SDR

Name

royalblue

SDR

HSV

color(--hsv 220 75% 97%)

SDR

XYZ

color(xyz-d65 0.243 0.189 0.904)

Color Variations

Shades

Created by adding black to a color, making it darker and more intense.

#3e6ef7
#395ed0
#344eaa
#2d3f85
#263063
#1d2242
#141524
#000000

Tints

Created by adding white to a color, making it lighter and softer.

#3e6ef7
#6781f9
#8695fb
#a1a9fc
#babefd
#d2d3fe
#e9e9ff
#ffffff

Tones

Created by adding gray to a color, reducing its intensity and making it more subdued.

#3e6ef7
#5370e6
#6173d5
#6b75c3
#7378b3
#797ba2
#7d7d91
#808080

Harmony Colors

Complementary scheme

Uses two colors opposite each other on the color wheel, creating high contrast and vibrant looks.

#f7c63e

AAA - 13.1

Analogous scheme

Uses colors that are next to each other on the color wheel, providing a harmonious and pleasing design.

#3eccf7

AAA - 11.18

#3e6ff7

Fail - 4.35

#693ef7

AA - 5.78

Monochromatic scheme

Uses variations in lightness and saturation of a single color, offering a cohesive and elegant look.

#3e6ef7

Fail - 4.39

#3757c0

AA - 6.38

#2e428d

AAA - 9.21

#242d5c

AAA - 13.08

#171a2f

AAA - 17.13

Split Complementary scheme

Uses a base color and two adjacent colors to its complementary, balancing contrast and harmony.

#3e6ff7

Fail - 4.35

#f7693e

Fail - 2.98

#ccf73e

AAA - 16.94

Triadic scheme

Uses three colors evenly spaced around the color wheel, creating vibrant and balanced designs.

#3e6ff7

Fail - 4.35

#f73e6f

Fail - 3.57

#6ff73e

AAA - 15.04

Tetradic scheme

Uses four colors arranged into two complementary pairs, offering rich variety and high contrast.

#3e6ff7

Fail - 4.35

#f73ecc

Fail - 3.22

#f7c63e

AAA - 13.1

#3ef769

AAA - 14.71

Rectangle scheme

A type of tetradic scheme forming a rectangle on the color wheel with two complementary pairs, providing balanced contrast.

#3e6ff7

Fail - 4.35

#c63ef7

Fail - 3.86

#f7c63e

AAA - 13.1

#6ff73e

AAA - 15.04

Double Split Complementary scheme

Uses two pairs of complementary colors, enhancing diversity and balance without the intensity of a tetradic scheme.

#3eccf7

AAA - 11.18

#3e6ff7

Fail - 4.35

#693ef7

AA - 5.78

#f7693e

Fail - 2.98

#ccf73e

AAA - 16.94

The ultimate color scheme & harmony generator

Create the perfect color harmonies by generating professional color schemes with our advanced Color Scheme Generator. Whether you need a high-contrast complementary layout, a smooth analogous blend, or a vibrant triadic scheme, this tool helps you explore and visualize color wheel rules effortlessly.

How does it work?

Select your base color and customize the number of generated steps. Our tool automatically computes seven distinct harmony types: Complementary, Analogous, Monochromatic, Split Complementary, Triadic, Tetradic, Rectangle, and Double Split Complementary. Each scheme shows a visual representation on the color wheel, alongside variations in shades, tints, and tones. When you've found the perfect combination, simply click any swatch to copy its hex value or export your colors directly to a custom collection.

Tips & Keyboard shortcuts

Learn how to use the tools effectively with these tips and shortcuts.

Generate & Customize

  • Generate random color

    Space
  • Show this help

    F1
  • Adjust color count

    Use range slider
  • Copy color values

    Click color blocks

History

  • Undo change

    Ctrl + Z
  • Redo change

    Ctrl + Shift + Z

Pro Tips

  • Press Space to generate a new scheme instantly

  • Your color history is saved in the URL for easy sharing

Color Scheme Contrast Checker

Check accessibility compliance of your palette colors.

Contrast Checker Explanations

Live APCA (WCAG 3 draft) and WCAG 2.1 contrast calculations comparing selected text color against surface colors.

Body Pass

Lc ≥ 60 · ≥ 4.5:1

Large Pass

Lc ≥ 45 · ≥ 3.0:1

Fail

Below thresholds

#3E6EF7

Fail - 4.39

Lc -75

#395ed0

AA - 5.69

Lc -83

#344eaa

AAA - 7.45

Lc -90

#2d3f85

AAA - 9.71

Lc -96

#263063

AAA - 12.46

Lc -102

#1d2242

AAA - 15.44

Lc -105

#141524

AAA - 18.06

Lc -107

#000000

AAA - 21

Lc -108

#6781f9

Fail - 3.45

Lc -67

#8695fb

Fail - 2.72

Lc -58

#a1a9fc

Fail - 2.18

Lc -48

#babefd

Fail - 1.76

Lc -36

#d2d3fe

Fail - 1.44

Lc -24

#e9e9ff

Fail - 1.19

Lc -11

#ffffff

Fail - 1

Lc 0

#5370e6

Fail - 4.34

Lc -75

#6173d5

Fail - 4.26

Lc -75

#6b75c3

Fail - 4.23

Lc -75

#7378b3

Fail - 4.14

Lc -74

#797ba2

Fail - 4.06

Lc -73

#7d7d91

Fail - 4.02

Lc -73

#808080

Fail - 3.94

Lc -72

Save color swatch

Choose a name and a collection for your swatch

Save to collection *

Create collection

Submit feedback

We'd love to hear from you, tell us what you think about Colorffy, and what we can improve.

What's your suggestion?

0/250 characters

Optional

Some basic browser environment data is included to help us reproduce issues.

Colorffy Logo

Create your Colorffy account

Create. Explore. Build. Check.

Continue with

or

Already have an account? Log in

By signing up, you agree to our Terms of Service and Privacy Policy

Upgrade to Pro and build faster.

Trusted by designers and developers around the world.

.css.csv.scss.json.pdf.jpg.png.svgtailwindstyle dictionarywallpapers4kultrawidewidescreenapp tokensflutterandroidswiftmaui.nethdr colors

Create faster. Export anywhere.

Unlock advanced exports, exportable app token files, unlimited collections, wallpapers, and an ad-free experience.


  • Generate color palettes with AI

  • Find assets using AI Search

  • Export polished Branding Kits (PDF)

  • Export Light/Dark themes

  • Export platform-native app tokens

  • Generate native gradient codes

  • Download 4K & mobile wallpapers

  • Save unlimited collections

  • Export to Web code

  • Enjoy an ad-free experience

PWA Prompt