CSSカラー名検索
Enter a hex code or pick a colour to find the closest named CSS colour. Compare side by side.
Enter a color and click "Find Name".
How It Works
- Enter a color value: Type or paste any hex code (#3b82f6), RGB value, HSL, or click the color picker to choose a color visually.
- Get the color name: The closest named CSS color, Pantone reference, and human-readable name are displayed instantly.
- Explore nearby colors: See a palette of similar named colors to find the best match or alternative for your design.
Why Use Color Name Finder?
When working with design systems, accessibility documentation, or client communications, having a human-readable name for a color is far more useful than a hex code. "Cornflower Blue" communicates clearly; "#6495ed" does not. This tool bridges the gap between machine color values and human color names, helping designers document palettes, explain color choices, and find standard CSS color names for their hex values.
Features
- Closest CSS color name: Finds the nearest named CSS color (from the full 148-color CSS named color list) to any hex or RGB value.
- Multiple input formats: Accepts hex (#rrggbb), RGB, HSL, and HSV color values.
- Color picker: Use the native color picker for visual selection.
- Nearby colors: Shows similar named colors to help you find alternatives.
- Color metadata: Displays the color's hue, saturation, lightness, and perceived brightness.
Frequently Asked Questions
How does it find the nearest color name?
The tool calculates the perceptual distance between your color and all named CSS colors using the CIEDE2000 color difference formula, which closely matches how humans perceive color differences. The closest match is returned as the name.
Are these the same as CSS color keywords?
Yes. The tool includes all 148 standard CSS named colors (from the CSS Color Module Level 4 specification) like "rebeccapurple", "dodgerblue", and "tomato". These can be used directly in CSS instead of hex values.
What if my color has no exact name?
Most colors do not have an exact CSS name. The tool returns the perceptually closest named color and shows the color difference (delta E) so you know how close the match is.