Color Selection List For HTML, JavaScript, PHP Array

This page presents a comprehensive list of color names in three different formats: HTML dropdown, JavaScript array, and PHP array. These can be useful for web developers and designers working with color selections in various programming environments.

Create Custom Colors Name for Your Needs

Customize your preferred color names by selecting options from the provided table. You can then include these selected names in the dropdown menu, JavaScript array, or PHP array. The codes for the selected color names will be displayed below.

Multilingual Options. Translated versions of the color names list are available in various languages

×
# Name Category Select
1RedPrimary Colors
2BluePrimary Colors
3YellowPrimary Colors
4GreenSecondary Colors
5OrangeSecondary Colors
6PurpleSecondary Colors
7CyanTertiary Colors
8MagentaTertiary Colors
9LimeTertiary Colors
10TealTertiary Colors

HTML Drop Down

The HTML dropdown is a common way to present color options in web forms. It uses the <select> and <option> tags to create a dropdown menu, with <optgroup> tags to organize colors into categories. This structure allows users to easily select a color from a grouped list.

HTML
<select id="color" name="color">
    <option value="">Choose a color</option>
    <optgroup label="Primary Colors">
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="yellow">Yellow</option>
    </optgroup>
    <optgroup label="Secondary Colors">
        <option value="green">Green</option>
        <option value="orange">Orange</option>
        <option value="purple">Purple</option>
    </optgroup>
    <optgroup label="Tertiary Colors">
        <option value="cyan">Cyan</option>
        <option value="magenta">Magenta</option>
        <option value="lime">Lime</option>
        <option value="teal">Teal</option>
        <option value="indigo">Indigo</option>
        <option value="violet">Violet</option>
    </optgroup>
    <optgroup label="Neutral Colors">
        <option value="black">Black</option>
        <option value="white">White</option>
        <option value="gray">Gray</option>
        <option value="silver">Silver</option>
        <option value="charcoal">Charcoal</option>
        <option value="beige">Beige</option>
        <option value="ivory">Ivory</option>
    </optgroup>
    <optgroup label="Warm Colors">
        <option value="pink">Pink</option>
        <option value="red">Red</option>
        <option value="orange">Orange</option>
        <option value="brown">Brown</option>
        <option value="gold">Gold</option>
    </optgroup>
    <optgroup label="Cool Colors">
        <option value="blue">Blue</option>
        <option value="cyan">Cyan</option>
        <option value="green">Green</option>
        <option value="teal">Teal</option>
        <option value="purple">Purple</option>
        <option value="turquoise">Turquoise</option>
    </optgroup>
    <optgroup label="Earth Tones">
        <option value="brown">Brown</option>
        <option value="tan">Tan</option>
        <option value="olive">Olive</option>
        <option value="rust">Rust</option>
        <option value="sage">Sage</option>
    </optgroup>
    <optgroup label="Other Colors">
        <option value="navy">Navy</option>
        <option value="maroon">Maroon</option>
        <option value="magenta">Magenta</option>
        <option value="coral">Coral</option>
        <option value="plum">Plum</option>
        <option value="lavender">Lavender</option>
    </optgroup>
</select>
Run code Edit Code Download

JavaScript Array

JavaScript Array of colors name.

The JavaScript array format is useful for dynamic web applications. It organizes colors into an array of objects, each representing a color group. This structure allows for easy manipulation and iteration over color options in JavaScript code, making it ideal for creating interactive color pickers or dynamically populating dropdown.

JavaScript
const colorOptions = [
    {
        category: "Primary Colors",
        options: [
            { value: "red", text: "Red" },
            { value: "blue", text: "Blue" },
            { value: "yellow", text: "Yellow" }
        ]
    },
    {
        category: "Secondary Colors",
        options: [
            { value: "green", text: "Green" },
            { value: "orange", text: "Orange" },
            { value: "purple", text: "Purple" }
        ]
    },
    {
        category: "Tertiary Colors",
        options: [
            { value: "cyan", text: "Cyan" },
            { value: "magenta", text: "Magenta" },
            { value: "lime", text: "Lime" },
            { value: "teal", text: "Teal" },
            { value: "indigo", text: "Indigo" },
            { value: "violet", text: "Violet" }
        ]
    },
    {
        category: "Neutral Colors",
        options: [
            { value: "black", text: "Black" },
            { value: "white", text: "White" },
            { value: "gray", text: "Gray" },
            { value: "silver", text: "Silver" },
            { value: "charcoal", text: "Charcoal" },
            { value: "beige", text: "Beige" },
            { value: "ivory", text: "Ivory" }
        ]
    },
    {
        category: "Warm Colors",
        options: [
            { value: "pink", text: "Pink" },
            { value: "red", text: "Red" },
            { value: "orange", text: "Orange" },
            { value: "brown", text: "Brown" },
            { value: "gold", text: "Gold" }
        ]
    },
    {
        category: "Cool Colors",
        options: [
            { value: "blue", text: "Blue" },
            { value: "cyan", text: "Cyan" },
            { value: "green", text: "Green" },
            { value: "teal", text: "Teal" },
            { value: "purple", text: "Purple" },
            { value: "turquoise", text: "Turquoise" }
        ]
    },
    {
        category: "Earth Tones",
        options: [
            { value: "brown", text: "Brown" },
            { value: "tan", text: "Tan" },
            { value: "olive", text: "Olive" },
            { value: "rust", text: "Rust" },
            { value: "sage", text: "Sage" }
        ]
    },
    {
        category: "Other Colors",
        options: [
            { value: "navy", text: "Navy" },
            { value: "maroon", text: "Maroon" },
            { value: "magenta", text: "Magenta" },
            { value: "coral", text: "Coral" },
            { value: "plum", text: "Plum" },
            { value: "lavender", text: "Lavender" }
        ]
    }
];

Usage Example

Use this array to create dynamic dropdown menu

HTML
<select id="color-select">
  <option value="">Select color</option>
</select>
javaScripr
const colorSelect = document.getElementById("color-select");
// Populate dropdown
colorOptions.forEach(group => {
    const optgroup = document.createElement("optgroup");
    optgroup.label = group.category;

    group.options.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option.value;
        optionElement.textContent = option.text;
        optgroup.appendChild(optionElement);
    });

    colorSelect.appendChild(optgroup);
});

Try it your self Real Time Preview

Download Edit Code

PHP Array

For server-side applications, you can represent color options using a PHP array. This array structure organizes colors into categories, with each category containing an array of options. Each option includes 'value' and 'text' properties, similar to the JavaScript approach. Using PHP arrays for color selection enables dynamic content generation on the server, making it easy to integrate color options into web forms and other PHP-based functionalities.

PHP
<?php
$colorOptions = [
    [
        'category' => 'Primary Colors',
        'options' => [
            ['value' => 'red', 'text' => 'Red'],
            ['value' => 'blue', 'text' => 'Blue'],
            ['value' => 'yellow', 'text' => 'Yellow']
        ]
    ],
    [
        'category' => 'Secondary Colors',
        'options' => [
            ['value' => 'green', 'text' => 'Green'],
            ['value' => 'orange', 'text' => 'Orange'],
            ['value' => 'purple', 'text' => 'Purple']
        ]
    ],
    [
        'category' => 'Tertiary Colors',
        'options' => [
            ['value' => 'cyan', 'text' => 'Cyan'],
            ['value' => 'magenta', 'text' => 'Magenta'],
            ['value' => 'lime', 'text' => 'Lime'],
            ['value' => 'teal', 'text' => 'Teal'],
            ['value' => 'indigo', 'text' => 'Indigo'],
            ['value' => 'violet', 'text' => 'Violet']
        ]
    ],
    [
        'category' => 'Neutral Colors',
        'options' => [
            ['value' => 'black', 'text' => 'Black'],
            ['value' => 'white', 'text' => 'White'],
            ['value' => 'gray', 'text' => 'Gray'],
            ['value' => 'silver', 'text' => 'Silver'],
            ['value' => 'charcoal', 'text' => 'Charcoal'],
            ['value' => 'beige', 'text' => 'Beige'],
            ['value' => 'ivory', 'text' => 'Ivory']
        ]
    ],
    [
        'category' => 'Warm Colors',
        'options' => [
            ['value' => 'pink', 'text' => 'Pink'],
            ['value' => 'red', 'text' => 'Red'],
            ['value' => 'orange', 'text' => 'Orange'],
            ['value' => 'brown', 'text' => 'Brown'],
            ['value' => 'gold', 'text' => 'Gold']
        ]
    ],
    [
        'category' => 'Cool Colors',
        'options' => [
            ['value' => 'blue', 'text' => 'Blue'],
            ['value' => 'cyan', 'text' => 'Cyan'],
            ['value' => 'green', 'text' => 'Green'],
            ['value' => 'teal', 'text' => 'Teal'],
            ['value' => 'purple', 'text' => 'Purple'],
            ['value' => 'turquoise', 'text' => 'Turquoise']
        ]
    ],
    [
        'category' => 'Earth Tones',
        'options' => [
            ['value' => 'brown', 'text' => 'Brown'],
            ['value' => 'tan', 'text' => 'Tan'],
            ['value' => 'olive', 'text' => 'Olive'],
            ['value' => 'rust', 'text' => 'Rust'],
            ['value' => 'sage', 'text' => 'Sage']
        ]
    ],
    [
        'category' => 'Other Colors',
        'options' => [
            ['value' => 'navy', 'text' => 'Navy'],
            ['value' => 'maroon', 'text' => 'Maroon'],
            ['value' => 'magenta', 'text' => 'Magenta'],
            ['value' => 'coral', 'text' => 'Coral'],
            ['value' => 'plum', 'text' => 'Plum'],
            ['value' => 'lavender', 'text' => 'Lavender']
        ]
    ]
];
?>

Usage Example PHP Array

Here is a quick example of how you might use this array to generate an HTML select option

PHP
<?php
$selectOption = '';
// create dropdown
foreach ($colorOptions as $group) {
    $selectOption .= '<optgroup label="' . htmlspecialchars($group['category']) . '">'.PHP_EOL;

    foreach ($group['options'] as $option) {
        $value = strtolower($option['value']);
        $text = htmlspecialchars($option['text']);
        $selectOption .= '<option value="' . $value . '">' . $text . '</option>'.PHP_EOL;
    }

    $selectOption .= '</optgroup>'.PHP_EOL;
}
?>

<select id="color-select">
  <?php echo $selectOption ?>
</select>
Download

Other drop down list