HueRoll is a free color palette tool for checking HTML color codes and exploring color combinations. Choose from 256 colors to see HEX, RGB, complementary and analogous colors, and contrast ratios against white and black. Copy the colors you want to use or save them to My Palette.
My Palette
No saved colors yet.
HTML Color Palette
256 Color Palette
How to use HueRoll
- Choose a color from the 256-color palette.
- In the panel that opens, review its HEX, RGB, HSL, HSV, CMYK, and other color information.
- Adjust the color with the color picker or HEX input. Select a color swatch in the panel to make it the current color and update the color information and suggestions. A swatch marked Current is already selected.
- Use Copy HEX for the current color, or use Copy beside a shade, tint, complementary or analogous color, harmony color, or 60–30–10 role to copy that HEX code without changing the current color.
- Save the current color to My Palette when you want to keep it for comparison.
For detailed steps on adjusting, copying, and saving colors, see the HueRoll User Guide.
HueRoll color guides
These guides use concrete color examples to explain HueRoll’s palette suggestions and contrast ratios.
- How to Use Complementary and Analogous Colors: compare contrasting accents with closely related colors.
- How to Use the 60–30–10 Color Rule in UI Design: assign background, supporting, and accent roles to HueRoll’s suggestions.
- How to Check Text Contrast with HueRoll: compare white and black text and interpret the ratios.
Basic color terms
Color terms become more useful when you connect them to a practical decision. The following answers explain the colors and harmony suggestions shown in HueRoll, including when to use them, what to combine them with, and what to check before using them in a design.
How do HEX, RGB, HSL, and HSV differ?
These formats express the same color in different ways. HEX represents red, green, and blue components in hexadecimal; RGB gives their numeric values. For example, #FF0000 and rgb(255, 0, 0) both represent red. HSL uses hue, saturation, and lightness, while HSV uses hue, saturation, and value. HSL lightness and HSV value are calculated differently and cannot be substituted directly. HueRoll displays each format for the selected color. Use a copy button when your destination accepts HEX, or refer to the displayed values when you need another format.
What is hue?
Hue is the family of a color, such as red, yellow, green, blue, or purple. It is useful when you want to explore a different color while keeping other parts of the design broadly similar. Hue changes from left to right in HueRoll’s 256-color palette, and the detail panel shows complementary, analogous, triadic, and other suggestions created by moving around the hue circle.
What do saturation and lightness describe?
Saturation describes how vivid a color is, while lightness describes how light or dark it is. Vivid colors often work well for buttons and small accents. Less saturated or lighter colors can be easier to use across large backgrounds. However, two colors with the same HSL lightness can appear very different in brightness—for example, yellow often looks lighter than blue. Check text contrast instead of relying on the lightness number alone.
What is a tint?
A tint is a lighter color made by adding white to a base color. Tints are useful for page backgrounds, cards, and subtle decoration when you want to keep the character of the base color across a larger area. A base color used for a button or accent often pairs naturally with one of its tints used as a background. HueRoll shows four tints made by mixing the selected color with increasing amounts of white.
What is a shade?
A shade is a darker color made by adding black to a base color. Shades can work for headings, dark backgrounds, pressed button states, or other areas that need more visual weight. Combining a tint, the base color, and a shade gives several roles to one color family without introducing unrelated colors. HueRoll shows four shades made by mixing the selected color with increasing amounts of black.
What is a tone?
Tone often describes the overall character created by a color’s lightness and saturation. In a narrower art usage, it can also mean a color softened by adding gray. Colors with a similar tone can feel connected even when their hues are different. HueRoll arranges lighter colors toward the top of the 256-color palette, vivid colors near the middle, and darker colors toward the bottom so that these changes are easier to explore.
What is a complementary color?
A complementary color sits opposite the base color on a color wheel. The strong difference can be useful for a button, notification, chart highlight, or another small accent that needs attention. Using both colors at the same strength and across equal areas can make them compete. It is often easier to let one color lead and use the other sparingly. HueRoll creates its complementary color by rotating the selected hue by 180 degrees.
What are analogous colors?
Analogous colors sit near the base color on a color wheel, such as blue with blue-green or orange with yellow. They are useful for backgrounds, gradients, illustrations, and other designs that need a calm sense of continuity. Because these colors can look similar, they may not clearly separate text, buttons, or status information. Use differences in lightness, shape, spacing, and labels as well as hue. For a practical comparison of both relationships, read How to Use Complementary and Analogous Colors.
What are triadic, square, and split-complementary harmonies?
These are ways to choose several colors from positions on a hue circle. A triadic harmony uses three directions, a square harmony uses four evenly spaced directions, and a split-complementary harmony uses the two colors beside the direct complement. They can be useful starting points for illustrations, presentations, or data displays. You do not have to use every suggestion at the same strength: choose one leading color and give the others supporting roles.
What is the 60–30–10 color rule?
The 60–30–10 rule is a way to balance color by using roughly 60% for a background or large surface, 30% for a supporting color, and 10% for an accent. These numbers describe visual area, not a formula for mixing colors. HueRoll uses the selected color as the accent, a light tint as the background, and offers two supporting-color candidates. Treat them as starting points, adjust them for your design, and check text contrast separately. For a practical walkthrough, read How to Use the 60–30–10 Color Rule in UI Design.
What is a contrast ratio?
A contrast ratio describes the difference in relative brightness between text and its background. A combination can look attractive but still be difficult to read when that difference is too small. HueRoll shows the selected color’s contrast ratios against white and black. Use them as a starting point for choosing white or black text, then verify the actual text size, weight, background, and interactive states in the finished design. For a step-by-step explanation, read How to Check Text Contrast with HueRoll.
In what order should I choose colors?
Start with one base color. Explore its tints and shades for lighter and darker roles. Compare analogous colors when you want a smooth family, or a complementary color when you need a stronger accent. If the design needs several roles, use the harmony suggestions or 60–30–10 palettes as starting points. Finish by checking text contrast, and save useful candidates to My Palette so that you can compare them without losing them.
About the color data
Color information and harmony suggestions are calculated in your browser from the selected color. CMYK values are reference conversions derived from sRGB, not color-calibrated values based on a printing environment or color profile. A color’s actual appearance may vary depending on your display and device settings.
Use the contrast ratios as a reference when evaluating the readability of text and background colors.
About saved colors
Colors saved to My Palette are stored in a cookie in your browser. No account is required, and saved colors are not sent to the WordPress database or an external service.
You cannot save colors when cookies are disabled. Saved colors may be removed if you change your browser settings, delete cookies, or the storage period expires.