Random color code
Random color code generation tool
— Retrieve HEX, RGB, and HSL data in bulk
This free tool automatically generates random color codes (HEX, RGB, HSL) with a single button click. The generated colors are displayed as a color palette using five different color scheme algorithms, including complementary and triad colors. You can also check the contrast ratio of text colors in real time, making it useful for a wide range of applications such as web design, graphic design, and illustration. You can copy your favorite colors to the clipboard with a single tap.
Random Color Generator
Random color code
GENERATED COLOR
#465DAA
Cool colors
HEX
#465DAA
Tap to copy
RGB
70, 93, 170
Tap to copy
HSL
227°, 42%, 47%
Tap to copy
brightness
medium
Saturation
medium
Hue
blue-purple
system
Cool colors
Text Preview · Text Preview
In the case of white text
Traditional Japanese Colors
Inherited from ancient times
The aesthetic sense and culture of color.
In the case of black text
Traditional Japanese Colors
Inherited from ancient times
The aesthetic sense and culture of color.
Similar Colors · Similar colors
Auto Palette · Automatic Palette Generation
History · Generation History
Clicking on a color in the history will return you to that color (up to 20 colors).
How to Use
How to use the tool
01
Generate color
Simply click the "Generate New Color" button, and a random color code will be instantly generated. It will be displayed in three formats: HEX, RGB, and HSL.
02
Copy the code
Tapping or clicking on each row of the HEX, RGB, and HSL data will copy it to the clipboard. You can then paste it directly into design tools or CSS files.
03
Expand the color scheme
The "Automatic Palette Generation" feature allows you to choose from five color scheme rules: complementary, triad, analog, split, and monochrome. You can also copy all five colors at once.
You can use it in these situations.
Web design and UI design
The color palette is automatically generated based on randomly generated colors. The contrast ratio can also be checked, making it useful for accessibility-conscious design.
Illustration and graphic design
When you need color scheme inspiration, you'll find new color scheme ideas from randomly generated colors.
CSS coding
Copy the HEX, RGB, or HSL format with a single tap and paste it directly into your CSS. It can be used directly in the format `color: #XXXXXX`.
Learning about color
You can learn color theory, including complementary colors, triads, and analogs, by examining them with actual colors. You can also intuitively grasp the relationships between color systems (warm and cool colors) and lightness and saturation.
SNS and banner creation
Useful for choosing background colors for Canva and thumbnails. The text preview lets you see at a glance whether white or black text is easier to read.
Game character design
For determining the color schemes of characters and world designs. Quickly create a consistent color scheme by combining analogous and complementary colors.
FAQ
QWhat is a color code?
A color code is a notation used to represent colors numerically on a computer. The most widely used is the "HEX code" (e.g., #FF5733), which represents the intensity of red, green, and blue (RGB) using two hexadecimal digits each. It is used for specifying colors in CSS and HTML, and for color management in design tools.
QWhat are the differences between HEX, RGB, and HSL?
HEX is a hexadecimal color representation format (e.g., #465DAA), RGB is a format that represents red, green, and blue using numerical values from 0 to 255 (e.g., 70, 93, 170), and HSL is a format that represents hue, saturation, and lightness (e.g., 227°, 42%, 47%). All formats can be used in CSS.
QWhat is contrast ratio?
The contrast ratio is a numerical representation of the difference in brightness between the background color and the text color. The international standard for web accessibility (WCAG) recommends a contrast ratio of 4.5:1 or higher for regular text. This tool automatically calculates the contrast ratio for both white and black text when the generated color is used as the background.
QWhat are complementary colors, triads, and analogs?
These are rules for combining colors (color theory). Complementary colors are colors directly opposite on the color wheel, triads are three colors spaced 120 degrees apart, analog colors are adjacent colors, splits are two colors adjacent to a complementary color, and monochrome is a combination of colors of the same hue but different brightness levels. You can try out color schemes used by professional designers with just one click.
QHow many colors can I save after generating them?
This tool records up to 20 generated colors in its history. Clicking on a color in the history will allow you to return to that color at any time. Note that the history is reset when you reload the page. We recommend copying the HEX code of your favorite colors and saving it separately.
Related Keywords