RGB color picker and color code converter

Pick a color and read its RGB, HEX, HSL, CMYK and OKLCH codes. Then look at matching colors, shades and readable pairs, right here on this page.

0 to 255
Quick copy
Tip: paste any CSS color into the HEX field. Press R for a random color or C to copy.
ConverterPalette generatorContrast checkerGradient builderUI previewSimilar names

Color codes

This color in every format. Click a value to copy it.

    The CMYK value here is a quick estimate for screens. Real print colors depend on an ICC profile, such as FOGRA39 or SWOP. Read why.

    About this color

    Its name, the closest web-safe color, its luminance and its feel.

    Full details for #6699FF

    Live UI preview

    See the color as a button, a heading, a background and an accent.

    Color harmonies

    Color sets built from the hue you picked. Click a swatch to use it. You can save or export any row.

    Shades, tints, tones and scales

    A design system scale from 50 to 950, plus lighter, darker and grayer versions. Mix them in OKLCH or in classic RGB.

    Mix #6699FF with other colors

    See what #6699FF makes with red paint, under a green light, printed with cyan ink and in a digital blend with blue. Click a picture to change the colors and amounts in the color mixer.

    Paint#6699FF and red paintOpen in the color mixer
    Light#6699FF and green lightOpen in the color mixer
    Print#6699FF and cyan inkOpen in the color mixer
    Digital#6699FF blended with blueOpen in the color mixer

    Use #6699FF in your code

    Ready to paste into CSS, Sass, Tailwind, iOS, Android and Flutter. Click the icon to copy a line.

    WhereCodeCopy
    CSS variable--color-6699ff: #6699FF;
    Sass variable$color-6699ff: #6699FF;
    Tailwind CSS v4@theme { --color-color-6699ff: #6699FF; }
    Tailwind CSS v3 configcolors: { 'color-6699ff': '#6699FF' }
    SwiftUIColor(red: 0.4, green: 0.6, blue: 1)
    UIKitUIColor(red: 0.4, green: 0.6, blue: 1, alpha: 1)
    Android XML<color name="color_6699ff">#FF6699FF</color>
    Flutter and Jetpack ComposeColor(0xFF6699FF)

    How people with color blindness see #6699FF

    #6699FF next to its complement and its two triadic colors, as seen with each type of color blindness.

    • Normal visionhow most people see it
    • Protanopiano red cones, about 1% of men
    • Deuteranopiano green cones, the most common type
    • Tritanopiano blue cones, very rare
    • Achromatopsiano color at all, very rare

    #6699FF stays easy to tell apart from its complement and triadic colors for the common types of color blindness. Try your own colors in the color blindness simulator.

    #6699FF in a user interface

    A sample app screen with #6699FF as the main color, on a light and a dark theme.

    Light theme

    Dark theme

    Buttons and bars use #6699FF as it is. On the light theme, #6699FF is too hard to read as text (2.78:1), so links, the badge and outline text use #4373D6 there (4.50:1). Build a full color scheme around it in the UI color preview.

    Gradients with #6699FF

    Four CSS gradients made from #6699FF. Copy the code, or open one in the gradient generator to change it.

    Soft tint

    From a pale tint to the full color.

    background: linear-gradient(90deg, #E0EBFF, #6699FF);

    Edit in the gradient generator

    Deep shade

    The color fading into a dark shade.

    background: linear-gradient(180deg, #6699FF, #172748);

    Edit in the gradient generator

    Analogous

    Its two neighbors on the color wheel.

    background: linear-gradient(135deg, #66E6FF, #6699FF, #8066FF);

    Edit in the gradient generator

    Triadic

    A bold blend with a triadic color, through a clean middle.

    background: linear-gradient(135deg, #6699FF, #BE89CD, #FF6699);

    Edit in the gradient generator

    Closest RAL, Tailwind and CSS colors

    The nearest match to #6699FF in three color systems that designers and builders use.

    RAL ClassicRAL 5024 Pastel blue#6A93B0, rough match (Ξ”E 11.7)Tailwind CSSblue-400 #60A5FA, very close (Ξ”E 3.4)CSS color namescornflowerblue #6495ED, very close (Ξ”E 2.7)

    Ξ”E is the distance in OKLab: under 2 is hard to see, over 10 is a clearly different color. Browse all RAL colors, the Tailwind palette or the 148 CSS color names. RAL values on screens are only a guide, so check a real color chart before you order paint.

    Your colors

    Recent colors, favorites and saved palettes. They are stored only in this browser.

    Keyboard shortcuts

    R
    Random color
    C
    Copy current HEX
    F
    Toggle favorite
    Ctrl / ⌘ + Z
    Undo
    Ctrl / ⌘ + Shift + Z
    Redo
    Arrow keys
    Move the 2D picker or any slider a little (hold Shift for steps 10 times bigger)
    Enter
    Apply a typed color in the HEX field
    ?
    Show this help

    Permalink to the current color: /color/6699FF

    More color tools

    Every tool runs in your browser and links back to the picker, so you can take a color with you from tool to tool.

    Understanding RGB color codes

    Every color on a screen is a mix of three lights: red, green and blue. An RGB color code gives the strength of each light on a scale from 0 to 255. So rgb(102, 153, 255) is 40% red, 60% green and 100% blue. That is the soft blue this page starts with. In hexadecimal, the same color is #6699FF. HEX uses two digits for each light, so HEX and RGB are just two ways to write the same value.

    RGB is easy for computers but hard for people. It is tricky to make a color β€œa bit lighter” by changing three numbers at once. HSL and HSV help here. They keep hue apart from saturation and lightness, and the 2D picker above works the same way. For print, you will use CMYK. For modern CSS, design systems and gradients, the OKLCH space gives smoother results that are easier to predict.

    How to use this color picker

    1. Drag in the large square. Left and right sets saturation, and up and down sets brightness. Use the hue slider to change the base hue, and the alpha slider to set transparency.
    2. You can also type or paste a value into the HEX field. It takes HEX, rgb(), hsl(), oklch(), color names like cornflowerblue, and even β€œ102, 153, 255”.
    3. Click any value card to copy it. The HEX, RGB, HSL and OKLCH values are valid CSS, so you can paste them right into a stylesheet.
    4. Scroll down to find matching colors, a design system scale from 50 to 950, and tints, shades and tones. Save any row as a palette, or export it as CSS, JSON or Tailwind.
    5. Use the link button to share the exact color. Every color has its own page at /color/HEX. Thousands of colors also have names, which you can browse in the color library.

    Frequently asked questions

    What is an RGB color code?

    An RGB color code tells you how much red, green and blue light a color has. Each one goes from 0 to 255. For example, rgb(102, 153, 255) has a little red, more green and full blue, which makes a sky blue. Screens add these three lights together. So rgb(255, 255, 255) is white and rgb(0, 0, 0) is black.

    How do I convert RGB to HEX?

    Write each RGB number as a two-digit hexadecimal number. Then join them after a #. 102 becomes 66, 153 becomes 99 and 255 becomes FF, so rgb(102, 153, 255) is #6699FF. The picker above does this for you. The converter also goes the other way (HEX to RGB) and handles HSL, CMYK, OKLCH and more.

    What is the difference between HSL and HSV?

    Both use hue and saturation. The third value is what sets them apart. In HSL it is lightness: 50% is the pure hue and 100% is white. In HSV it is value, or brightness: 100% is the brightest form of the hue, and you get white by lowering saturation. CSS uses HSL. Many design apps use HSV in their color pickers.

    Why does the CMYK value say it is approximate?

    Printed color depends on the ink, the paper and the press. An ICC profile describes all of these. The CMYK shown here comes from a simple formula with no profile. That is fine as a guide, but not for real print jobs. Before you send files to a printer, convert them in your print software with the right profile.

    Is anything uploaded when I pick colors or extract them from images?

    No. All color math, image work and saved favorites stay in your browser. Nothing is sent to a server, and you don't need an account.

    Many thanks for the support

    Buy YouTube subscribers, views, likes, comments, and shares from Socialboom with secure checkout, no YouTube password required, and easy order tracking from one dashboard.

    Play the new Snake Jungle game online.

    The Real-Time HTML Editor is there to help you convert documents and to edit HTML easily.