# Color Expander

Expand 3-digit HEX codes to 6-digit codes (e.g., #FFF to #FFFFFF)

> Canonical page: https://elysiatools.com/en/tools/color-expander

- **Category:** Design

- **Keywords:** hex, color, expand, duplicate, lengthen, css, web, hexadecimal, standardize

## Overview

The Color Expander is a specialized utility designed to instantly convert shorthand 3-digit HEX color codes into their standard 6-digit counterparts, ensuring consistency across your CSS and design projects.

## Inputs

- **HEX Colors** (textarea): Enter HEX colors, one per line: #FFF #000 #F00 #0F0 #00F #FF0 #F0F #0FF FFFFFF 000000
- **Output Format** (select)
- **Include already 6-digit colors** (checkbox): Show colors that are already 6 digits with reasons

## When to use

- When you need to standardize a mix of 3-digit and 6-digit HEX codes in your CSS files.
- When preparing color palettes for web development that require full 6-digit hexadecimal notation.
- When cleaning up legacy codebases that use shorthand color definitions.

## How it works

- Paste your list of HEX color codes into the input area, with one color per line.
- Select your preferred output format, such as uppercase, lowercase, or CSS-ready syntax.
- Toggle the inclusion of already 6-digit colors if you wish to process your entire list at once.
- Click the convert button to generate your standardized list of 6-digit HEX codes.

## Use cases

- Standardizing design tokens for a cross-platform UI library.
- Refactoring CSS stylesheets to meet strict coding style guidelines.
- Converting legacy shorthand color values for modern web applications.

## Frequently asked questions

### Does this tool support colors without the hash symbol?

Yes, the tool accepts both formats and will normalize them based on your chosen output settings.

### Can I process multiple colors at once?

Yes, simply paste your list of colors into the input field with each code on a new line.

### What happens to colors that are already 6 digits long?

You can choose to include them in the output or filter them out using the 'Include already 6-digit colors' checkbox.

### Is the output compatible with CSS?

Yes, you can select the 'CSS format' option to ensure the output is ready for direct use in your stylesheets.

### Does this tool change the actual color values?

No, it only expands the shorthand notation (e.g., #F00) to the full notation (#FF0000), keeping the color identical.

## Related tools

- [Adobe RGB to HEX Converter](https://elysiatools.com/en/tools/adobe-rgb-to-hex-converter): Convert Adobe RGB color values to HEX format for web design
- [CMYK to HEX Converter](https://elysiatools.com/en/tools/cmyk-to-hex-converter): Convert CMYK color values to HEX for screen display
- [Color Shortener](https://elysiatools.com/en/tools/color-shortener): Shorten 6-digit HEX codes to 3-digit codes (e.g., #FFFFFF to #FFF)
- [HEX to Adobe RGB Converter](https://elysiatools.com/en/tools/hex-to-adobe-rgb-converter): Convert HEX color values to Adobe RGB format for professional design
- [HEX to CMYK Converter](https://elysiatools.com/en/tools/hex-to-cmyk-converter): Convert HEX color values to CMYK for printing with alpha channel support
- [HEX to HSL Converter](https://elysiatools.com/en/tools/hex-to-hsl-converter): Convert HEX color values to HSL for screen display
- [HEX to HSV Converter](https://elysiatools.com/en/tools/hex-to-hsv-converter): Convert HEX color values to HSV/HSB for color manipulation
- [HEX to LAB Converter](https://elysiatools.com/en/tools/hex-to-lab-converter): Convert HEX color values to LAB for color management with alpha channel support

## Samples

- [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
- [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion
- [Web Image Processing Rust Samples](https://elysiatools.com/en/samples/web-image-processing-rust): Web Rust image processing examples including image read/save, scaling, and format conversion
- [Web Image Processing TypeScript Samples](https://elysiatools.com/en/samples/web-image-processing-typescript): Web TypeScript image processing examples including image read/save, scaling, and format conversion