You choose an orange for a button, and your developer asks for the HEX code. Your designer sends RGB values. A stylesheet needs HSL. Kwebby's Color Picker shows one color in all three formats and lets you copy each with a click.
This color picker also writes a CSS variable line and lists ten lighter and darker versions of your color. It runs in your browser and is one of the Free Image Tools Online from Kwebby.
Key Takeaways
- Kwebby's Color Picker shows a chosen color as HEX, RGB and HSL, plus a CSS custom property you can paste into a stylesheet.
- You pick a color from your browser's color window or type a HEX code in Manual HEX Input.
- The Shades & Tints panel lists five lighter and five darker versions of your color. Click one to copy its HEX code.
- The tool does not sample colors from an image or your screen. It works from a palette or a code.
- HEX and RGB describe the same colors in different notation, and HSL is the easiest format to adjust by hand.
- Check contrast before you use a color for text. WCAG asks for at least 4.5:1 for normal text and 3:1 for large text.
What Is the Kwebby Color Picker?
Kwebby's Color Picker is a free tool that lets you choose a color and copy it as a HEX, RGB or HSL code or as a CSS custom property. It also generates five tints and five shades of your color. You choose from a palette or type a HEX code. Nothing is uploaded.
The default color is a bright orange, #f97316. Change it and every value on the page updates.
Key Features and How It Works
The page has three panels. The first holds the picker. The second lists the codes. The third lists the shades and tints.
Color box and live swatch
The large color box opens your browser's own picker. MDN notes that this window varies by browser and platform, so it looks different in Chrome, Safari and Firefox. A swatch below it shows the chosen color, with its HEX code underneath.
Manual HEX Input
Type or paste a code such as #1d4ed8 into Manual HEX Input. The field accepts six-digit codes and three-digit shorthand such as #f80, which it expands to #ff8800. The # is added if you leave it out. The other panels update only when the code is complete, so a half-typed code never shows broken values.
Color Formats
Four rows show the same color in different forms, each with a Copy button. HEX looks like #F97316. RGB looks like rgb(249, 115, 22). HSL looks like hsl(25, 95%, 53%). CSS var gives a line you can paste into a stylesheet: --color-primary: #f97316;. A check mark appears after you copy a value.
Shades & Tints
This panel shows ten swatches in two columns. Five tints mix your color with white and five shades mix it with black, from light to dark. Click any swatch to copy its HEX code.
Why Color Codes Matter
Screens build every color from red, green and blue light. Each channel runs from 0 to 255, which gives 256 × 256 × 256 = 16,777,216 possible colors. HEX writes those three numbers in base 16, so 249, 115 and 22 become F9, 73 and 16.
Different tools ask for different notation. A design file may list RGB, a CSS file may use HEX and an animation may use HSL. A converter removes the arithmetic and the typing errors that come with it.
HSL describes a color by hue, saturation and lightness. MDN explains that hue is an angle from 0 to 360 degrees, saturation and lightness run from 0 to 100 percent, and 50 percent lightness is a normal color. That makes it simple to build lighter or darker variants by changing one number.
How to Use the Color Picker
- Open the picker. Click the large color box. Your browser's color window opens.
- Choose a color. Drag in the window until the swatch matches what you want. Or skip this step and use the next one.
- Type a HEX code. In Manual HEX Input, enter a full code such as #1d4ed8 if you already know the color.
- Copy a format. Under Color Formats, click Copy beside HEX, RGB, HSL or CSS var. A check mark confirms the copy.
- Copy a shade or tint. In Shades & Tints, click a swatch to copy its HEX code.
Best Practices for Using Color Codes
A few habits keep colors consistent across a site and keep text readable.
Type a complete code in Manual HEX Input
Enter six digits or three-digit shorthand. The panels keep the last complete color until you finish typing, so check that the swatch changed before you copy a value. Common mistake: copying the RGB row while the code is still incomplete.
Check contrast before you pick a text color
WCAG sets a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. White text on the default orange #f97316 measures about 2.8:1 and fails. Dark gray #1f2937 on the same orange measures about 5.2:1 and passes. Common mistake: judging contrast by eye on a bright monitor. This tool does not calculate ratios, so use a contrast checker for the final test.
Use HSL to find a complementary color
A complementary color sits opposite on the color wheel. MDN says you can find it by adding or subtracting 180 degrees from the hue. The default orange is hsl(25, 95%, 53%), so its complement is hsl(205, 95%, 53%), a blue. Type the matching HEX code into Manual HEX Input to see it.
Build a scale from tints and shades
Pick one brand color, then copy a light tint for backgrounds and a dark shade for text or hover states. The two end swatches are very close to white and black, so the middle swatches are usually the most useful.
Store colors as CSS variables
Copy the CSS var row into your stylesheet and rename it, for example --color-brand. Change the value in one place to update the whole site. Run the finished file through the CSS Minifier before you publish it.
Convert hex numbers by hand when needed
The Hex Calculator converts numbers between hexadecimal, decimal, octal and binary, which helps when you want to check one channel of a code by hand.
Common Use Cases
- Web design: copy the HEX or RGB value of a brand color into CSS.
- Theme variables: copy the CSS var row to start a design token file.
- Matching graphics: use the same HEX code in the Text to Image Generator and the QR Code Generator.
- Hover and disabled states: take a darker shade for hover and a lighter tint for disabled buttons.
- Handoff: send a developer the HEX, RGB and HSL values together so nothing is converted twice.
Related Kwebby Tools
These tools use the colors you pick:
- Hex Calculator: convert numbers between hexadecimal, decimal, octal and binary.
- Text to Image Generator: set text and background colors with your codes.
- QR Code Generator: apply brand colors to a QR code.
- Favicon Generator Tool: use the same colors on a site icon.
- Online Image Editor: adjust an image to match your palette.
- CSS Minifier: shrink the stylesheet that holds your color variables.
Frequently Asked Questions (FAQs)
What is a color picker?
A color picker is a tool that lets you choose a color visually and returns its code. Designers use the code in CSS, design files and brand guides. Kwebby's Color Picker returns HEX, RGB, HSL and a CSS variable.
How do I convert HEX to RGB?
Split the six digits into three pairs and convert each pair from base 16 to a number from 0 to 255. For #F97316, F9 is 249, 73 is 115 and 16 is 22, so the color is rgb(249, 115, 22). The tool shows this conversion automatically.
What is the difference between HEX, RGB and HSL?
HEX and RGB describe the same red, green and blue values. HEX uses base 16 and RGB uses decimal numbers. HSL describes hue in degrees from 0 to 360, saturation in percent and lightness in percent, which makes manual adjustments easier.
Can this color picker pick a color from an image or my screen?
No. The tool works from your browser's color window or a HEX code you type. It does not sample pixels from a photo or the screen. For that, use an image color picker or a screen eyedropper.
How are the shades and tints made?
Tints mix your color with white and shades mix it with black. The panel lists five of each from lightest to darkest. Click a swatch to copy its HEX code.
Is the color picker free?
Yes. The tool is free and needs no account. It runs in your browser, so the colors you pick are not uploaded.
Final Thoughts
Kwebby's Color Picker turns one choice into the codes every project needs. Pick or type a color, copy the HEX, RGB, HSL or CSS variable, and use the tints and shades to fill out a palette. Test text contrast against the 4.5:1 WCAG ratio, then reuse the same codes across your stylesheet, graphics and icons. Browse more Kwebby tools when you are ready to apply them.