カラーコンバーターの使い方
HEX、RGB、HSL間の色変換ガイド。
Color formats explained: HEX, RGB, HSL
HEX: Hexadecimal RGB representation. #FF5733 = R:255, G:87, B:51. Most common format in CSS and web design.
RGB: Red, Green, Blue. Values 0-255 per channel. rgb(255, 87, 51). Additive model — all combined equals white.
HSL: Hue (0-360°), Saturation (0-100%), Lightness (0-100%). hsl(14, 100%, 60%). More intuitive: want lighter? increase L. Less saturated? decrease S.
CMYK: Cyan, Magenta, Yellow, Key(Black). Subtractive model for printing.
Convert between all formats with the NexTools color converter.
How to use the NexTools color converter
With the NexTools converter:
Step 1: Enter a color in any format (HEX, RGB, HSL).
Step 2: Instantly see conversion to all other formats.
Step 3: Copy the value you need with one click.
Visual color picker available for graphical selection. Everything processed in your browser.
When to use each color format
HEX: CSS, web design, Figma, Sketch. The de facto frontend standard.
RGB/RGBA: CSS when you need transparency (alpha). rgba(255, 87, 51, 0.5) = 50% opacity.
HSL/HSLA: Modern CSS. Easier to manipulate: create palettes by varying H, tones by varying L.
CMYK: Professional printing. InDesign, Illustrator. ALWAYS verify CMYK for print.
Color theory for web developers
Contrast: WCAG 2.1 requires minimum 4.5:1 ratio for normal text, 3:1 for large text.
Monochromatic palette: One hue (fixed H), varying S and L.
Complementary: Opposite colors on the wheel (H + 180°). High contrast.
Triad: 3 equidistant colors (H, H+120°, H+240°).
For CSS gradients, see our gradient generator. For CSS shadows, the shadow generator.
CSS variables and colors: 2026 best practices
Define colors as CSS custom properties:
:root {
--color-primary: hsl(14, 100%, 60%);
--color-primary-light: hsl(14, 100%, 80%);
--color-primary-dark: hsl(14, 100%, 40%);
}
Why HSL: To create light/dark variants, just change L. With HEX you'd calculate each manually.
Dark mode: Invert variables. Light background becomes dark, dark text becomes light. With HSL: L:95% → L:10% for backgrounds, L:10% → L:90% for text.
Colors across browsers and devices
Color gamut: Not all monitors show the same colors. sRGB is the web standard (~35% of visible colors). Display P3 (MacBooks, iPhones) covers ~50%.
CSS color level 4: color(display-p3 1 0.5 0) enables P3 colors in supporting browsers.
oklch(): The most modern CSS color format. Perceptually uniform. oklch(70% 0.15 30). Supported in all modern browsers since 2024.
Complementary tools for working with colors
Browser color picker: Chrome DevTools includes a color picker showing HEX, RGB, HSL.
Coolors.co: Palette generator. 5 harmonious colors with one click.
WebAIM: Free WCAG contrast checker.
NexTools: Color converter for quick format conversions. Complement with the gradient generator.
Colors in web accessibility (WCAG)
Color accessibility is law in many countries (ADA in US, EAA in EU):
WCAG 2.1 requirements:
- Normal text: minimum 4.5:1 contrast
- Large text (+18px bold or +24px): minimum 3:1
- UI elements (buttons, inputs): minimum 3:1 against background
Don't rely on color alone: Color blindness affects 8% of men. A red "error" and green "success" button are indistinguishable to them. Add icons or text.
Use the percentage calculator to verify contrast ratios manually.
このツールを試す：
ツールを開く→よくある質問
What is the difference between HEX and RGB
Same color model (Red-Green-Blue) in different notation. #FF5733 in HEX = rgb(255, 87, 51). HEX is more compact for CSS. RGB is more readable and allows transparency with rgba().
Which color format is best for CSS
HEX for simple fixed colors. HSL for creating variants and dark mode. RGBA for transparency. oklch() for the most modern, perceptually uniform format.
Do colors look the same on all monitors
No. Depends on monitor gamut, calibration, and color profile. sRGB is the web standard. Display P3 has more colors. Work in sRGB unless you need specific P3 colors.
How do I choose accessible colors for my website
Verify text-background contrast ratio is minimum 4.5:1 (WCAG AA). Use tools like WebAIM Contrast Checker. Don't rely on color alone — add icons or text.
Can I use HEX colors for printing
Not directly. HEX/RGB are for screen (additive). Printing needs CMYK (subtractive). Bright screen colors may look dull in print because CMYK has a smaller gamut.
What is oklch and should I use it
oklch() is the most modern CSS color format (2024+). Perceptually uniform. Supported in all modern browsers. Recommended for new projects.