無料カラーツール

カラーツールについて

Absolutoolにはデザイナー、開発者、アクセシビリティ専門家向けの7つの専門カラーツールが含まれています。HEX、RGB、HSL、HSB形式間で変換できます。色彩理論を使って調和のとれたパレットを生成できます。WCAGコントラスト比を確認して、デザインがすべての人にアクセシブルであることを保証できます。

色覚異常シミュレーターはBrettel/Viénotのルックアップ行列を使用して、8種類の色覚障害を正確にモデル化します · 画像をアップロードするか、個々の色をテストできます。デザインシステムトークンにはカラーシェードジェネレーター、正確なブレンドにはカラーミキサー、写真から色を抽出するには画像カラーピッカーを使用できます。すべてのツールは完全にブラウザ内で動作します。

Color Models on the Web

Every pixel on a modern web page is described by a color value that the browser interprets and asks the GPU to render. The two formats you'll see most often are HEX (a six-digit hexadecimal triplet like #3b82f6) and RGB (decimal values like rgb(59 130 246)). Both describe the same thing: how much red, green, and blue light to mix on a screen that uses additive color. A standard 24-bit display gives 256 levels per channel, which means 16.78 million unique colors are addressable. HEX is shorter, RGB is easier to compute on, and the two are interchangeable.

HSL (hue, saturation, lightness) and HSB (hue, saturation, brightness) describe the same screen color but in coordinates closer to how humans perceive it. Hue is the color's position on the color wheel from 0° (red) to 360°. Saturation is how vivid the color is, from grey to fully pure. Lightness controls how much white or black is mixed in. HSL is the format designers usually pick when building design systems because adjusting one channel produces a predictable shift, like making a button 10% darker for the hover state. CSS supports HEX, RGB, HSL, and the newer LCH and OKLCH formats natively.

Behind all of these formats sits a color space, which defines exactly what "red 255" means in physical terms. The web's default is sRGB, standardized by the IEC in 1996 and the same gamut nearly every desktop and phone display covers. Newer Apple, OLED, and high-end devices support Display P3, a wider gamut that adds about 25% more saturated reds and greens. CSS now lets you write color(display-p3 1 0 0) to take advantage. Most color tools on this site work in sRGB and reach every browser; P3 expands what's available without changing the workflow.

Understanding WCAG Color Contrast

The Web Content Accessibility Guidelines (WCAG 2.1) set numeric thresholds for the contrast between text and its background. Level AA, the level most accessibility audits target, requires a ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above). Level AAA tightens those to 7:1 and 4.5:1. The ratio is calculated from the relative luminance of each color, a perceptual brightness value derived from the sRGB primaries via the IEC 61966-2-1 formula. Two colors that look "almost the same" may still pass, two colors that look completely different may fail if one is grey on grey.

These numbers matter because roughly 5% of the worldwide adult population has measurably reduced contrast sensitivity from cataracts, glaucoma, diabetic retinopathy, or aging-related macular changes. Bright outdoor sunlight reduces effective contrast for everyone. Mobile screens viewed at an angle reduce contrast further. WCAG's thresholds are designed to keep text legible under those real conditions, not on a color-calibrated monitor in a dim office. A newer algorithm called APCA (the candidate replacement coming in WCAG 3.0) accounts for things WCAG 2.x ignores, like text weight and polarity. For now, 4.5:1 AA remains the standard most regulators reference.

Color Blindness and Inclusive Design

Roughly 8% of men and 0.5% of women of Northern European descent have some form of red-green color vision deficiency, and the global numbers are similar in scale. The three most common types affect how the cone cells in the retina respond to specific wavelengths. Deuteranomaly (the most common, about 5% of men) reduces sensitivity to medium-wavelength green light. Protanomaly reduces sensitivity to long-wavelength red light. Tritanomaly affects blue-yellow perception and is far rarer. The simulators on this site use the color-matrix derivation from Brettel, Viénot & Mollon (1997), the standard reference for these transforms in color science.

The practical design rule is "don't rely on color alone". A red error icon and a green success icon look identical to many users with deuteranomaly. Adding a different shape (a cross versus a checkmark), a label ("Error" or "Success"), or a pattern fixes this at no cost to other users. Chart and dashboard designs are the most frequent offenders because legends typically rely on a color swatch. The Color Blindness Simulator on this site lets you preview a real screenshot through each common deficiency before publishing, so you can spot the patterns that would have failed in production.

Color Theory for Palettes

The color wheel arranges hues by their angle around the circle: red at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, magenta at 300°. Complementary colors sit directly opposite each other (red and cyan, blue and orange) and produce the strongest contrast. Analogous palettes use two to four hues adjacent on the wheel and feel calm and unified, well suited to backgrounds and gradients. Triadic palettes use three evenly spaced hues 120° apart, providing balance with variety. Tetradic palettes use four hues forming a rectangle. These rules emerged from 19th-century artist's manuals but match what perceptual research has since confirmed.

A typical brand system needs about five colors: a primary brand color, an accent (often complementary), a neutral grey, plus success-green and error-red. The Palette Generator on this site picks the harmony first then offers 10-step tint and shade scales for each picked color, the same structure design systems like Tailwind, Material, and Carbon use. The Accessible Palette tool restricts the generation to combinations that meet WCAG AA contrast on a white or dark background. Both tools work entirely in your browser, so the colors you pick for an unreleased brand are never sent anywhere.

Frequently Asked Questions