Color Preview

HEX

#3e6ef7

RGB

rgb(62, 110, 247)

HSL

hsl(220 92% 61%)

HWB

hwb(220 24% 3.1%)

LCH

lch(49.4% 77.7 286)

LAB

lab(49.4% 21.1 -74.8)

CMYK

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

OKLAB HDR

oklab(58% -0.02 -0.21)

OKLCH HDR

oklch(58% 0.21 270)

P3 HDR

color(display-p3 0.29 0.43 0.94)

Name

royalblue

SRGB HDR

rgb(24% 43% 97%)

HSV

color(--hsv 220 75% 97%)

XYZ

color(xyz-d65 0.243 0.189 0.904)

Color Actions

Tip: Press SPACE to generate a random color

Click a color block to copy to your clipboard.

View in CSS Generator

Color variations

View the different color variations generated from the selected color.

Color Variations

Shades of #3E6EF7

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

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

Tints of #3E6EF7

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

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

Tones of #3E6EF7

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

View the different color harmonies generated from the selected color.

Color Harmonies

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

AI color analysis

PRO

Ask AI to analyze the selected color and provide insights, use cases, and more.

AI-generated content can make mistakes, so double-check it.

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.

Create your free account

Sign up to save and like your color palettes, gradients, and more.

Sign up 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, downloadable app token files, unlimited collections, wallpapers, and an ad-free experience.


  • AI tools for color insights and faster creation

  • Export a polished Branding Kit as PDF

  • Export Light/Dark themes to CSS and CSV

  • Download app color token files for Android, Flutter, Swift, and .NET MAUI

  • App gradient code (Android, Flutter, Swift)

  • One‑click wallpapers for desktop and mobile (4K, ultrawide, iPhone, Pixel, more)

  • Unlimited collections

  • Export color data to JSON, CSS, SCSS, Tailwind, Style Dictionary, and CSV

  • Download colors as PNG, JPG, or SVG

  • Ad‑free experience

PWA Prompt