diff --git a/.gitattributes b/.gitattributes
index 2093a6ae4..1a676cd52 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,4 @@
+nicegui/color.py                   linguist-generated
 nicegui/elements/tailwind.py       linguist-generated
 nicegui/elements/tailwind_types/** linguist-generated
 nicegui/elements/lib/**            linguist-vendored
diff --git a/fetch_colors.py b/fetch_colors.py
new file mode 100755
index 000000000..d2b5319c1
--- /dev/null
+++ b/fetch_colors.py
@@ -0,0 +1,28 @@
+#!/usr/bin/env python3
+from pathlib import Path
+from typing import cast
+
+import webcolors
+
+from nicegui.elements.mixins.color_elements import QUASAR_COLORS, TAILWIND_COLORS
+
+CSS_COLORS = sorted(set([
+    *list(webcolors.CSS2_NAMES_TO_HEX),
+    *list(webcolors.CSS21_NAMES_TO_HEX),
+    *list(webcolors.CSS3_NAMES_TO_HEX),
+    *list(webcolors.HTML4_NAMES_TO_HEX),
+]))
+
+with open(Path(__file__).parent / 'nicegui' / 'color.py', 'w') as f:
+    for color in CSS_COLORS:
+        f.write(f"{color.upper()} = '{color}'\n")
+
+    f.write('\n')
+    f.write('class quasar:\n')
+    for color in QUASAR_COLORS:
+        f.write(f"    {color.upper().replace('-', '_')} = '{color}'\n")
+
+    f.write('\n')
+    f.write('class tailwind:\n')
+    for color in cast(list[str], TAILWIND_COLORS):
+        f.write(f"    {color.upper().replace('-', '_')} = '{color}'\n")
diff --git a/nicegui/__init__.py b/nicegui/__init__.py
index 710da8577..2a125f49a 100644
--- a/nicegui/__init__.py
+++ b/nicegui/__init__.py
@@ -1,4 +1,4 @@
-from . import context, elements, run, ui
+from . import color, context, elements, run, ui
 from .api_router import APIRouter
 from .app.app import App
 from .client import Client
@@ -10,6 +10,7 @@
     'APIRouter',
     'app',
     'App',
+    'color',
     'Client',
     'context',
     'elements',
diff --git a/nicegui/color.py b/nicegui/color.py
new file mode 100644
index 000000000..84ce73a41
--- /dev/null
+++ b/nicegui/color.py
@@ -0,0 +1,691 @@
+ALICEBLUE = 'aliceblue'
+ANTIQUEWHITE = 'antiquewhite'
+AQUA = 'aqua'
+AQUAMARINE = 'aquamarine'
+AZURE = 'azure'
+BEIGE = 'beige'
+BISQUE = 'bisque'
+BLACK = 'black'
+BLANCHEDALMOND = 'blanchedalmond'
+BLUE = 'blue'
+BLUEVIOLET = 'blueviolet'
+BROWN = 'brown'
+BURLYWOOD = 'burlywood'
+CADETBLUE = 'cadetblue'
+CHARTREUSE = 'chartreuse'
+CHOCOLATE = 'chocolate'
+CORAL = 'coral'
+CORNFLOWERBLUE = 'cornflowerblue'
+CORNSILK = 'cornsilk'
+CRIMSON = 'crimson'
+CYAN = 'cyan'
+DARKBLUE = 'darkblue'
+DARKCYAN = 'darkcyan'
+DARKGOLDENROD = 'darkgoldenrod'
+DARKGRAY = 'darkgray'
+DARKGREEN = 'darkgreen'
+DARKGREY = 'darkgrey'
+DARKKHAKI = 'darkkhaki'
+DARKMAGENTA = 'darkmagenta'
+DARKOLIVEGREEN = 'darkolivegreen'
+DARKORANGE = 'darkorange'
+DARKORCHID = 'darkorchid'
+DARKRED = 'darkred'
+DARKSALMON = 'darksalmon'
+DARKSEAGREEN = 'darkseagreen'
+DARKSLATEBLUE = 'darkslateblue'
+DARKSLATEGRAY = 'darkslategray'
+DARKSLATEGREY = 'darkslategrey'
+DARKTURQUOISE = 'darkturquoise'
+DARKVIOLET = 'darkviolet'
+DEEPPINK = 'deeppink'
+DEEPSKYBLUE = 'deepskyblue'
+DIMGRAY = 'dimgray'
+DIMGREY = 'dimgrey'
+DODGERBLUE = 'dodgerblue'
+FIREBRICK = 'firebrick'
+FLORALWHITE = 'floralwhite'
+FORESTGREEN = 'forestgreen'
+FUCHSIA = 'fuchsia'
+GAINSBORO = 'gainsboro'
+GHOSTWHITE = 'ghostwhite'
+GOLD = 'gold'
+GOLDENROD = 'goldenrod'
+GRAY = 'gray'
+GREEN = 'green'
+GREENYELLOW = 'greenyellow'
+GREY = 'grey'
+HONEYDEW = 'honeydew'
+HOTPINK = 'hotpink'
+INDIANRED = 'indianred'
+INDIGO = 'indigo'
+IVORY = 'ivory'
+KHAKI = 'khaki'
+LAVENDER = 'lavender'
+LAVENDERBLUSH = 'lavenderblush'
+LAWNGREEN = 'lawngreen'
+LEMONCHIFFON = 'lemonchiffon'
+LIGHTBLUE = 'lightblue'
+LIGHTCORAL = 'lightcoral'
+LIGHTCYAN = 'lightcyan'
+LIGHTGOLDENRODYELLOW = 'lightgoldenrodyellow'
+LIGHTGRAY = 'lightgray'
+LIGHTGREEN = 'lightgreen'
+LIGHTGREY = 'lightgrey'
+LIGHTPINK = 'lightpink'
+LIGHTSALMON = 'lightsalmon'
+LIGHTSEAGREEN = 'lightseagreen'
+LIGHTSKYBLUE = 'lightskyblue'
+LIGHTSLATEGRAY = 'lightslategray'
+LIGHTSLATEGREY = 'lightslategrey'
+LIGHTSTEELBLUE = 'lightsteelblue'
+LIGHTYELLOW = 'lightyellow'
+LIME = 'lime'
+LIMEGREEN = 'limegreen'
+LINEN = 'linen'
+MAGENTA = 'magenta'
+MAROON = 'maroon'
+MEDIUMAQUAMARINE = 'mediumaquamarine'
+MEDIUMBLUE = 'mediumblue'
+MEDIUMORCHID = 'mediumorchid'
+MEDIUMPURPLE = 'mediumpurple'
+MEDIUMSEAGREEN = 'mediumseagreen'
+MEDIUMSLATEBLUE = 'mediumslateblue'
+MEDIUMSPRINGGREEN = 'mediumspringgreen'
+MEDIUMTURQUOISE = 'mediumturquoise'
+MEDIUMVIOLETRED = 'mediumvioletred'
+MIDNIGHTBLUE = 'midnightblue'
+MINTCREAM = 'mintcream'
+MISTYROSE = 'mistyrose'
+MOCCASIN = 'moccasin'
+NAVAJOWHITE = 'navajowhite'
+NAVY = 'navy'
+OLDLACE = 'oldlace'
+OLIVE = 'olive'
+OLIVEDRAB = 'olivedrab'
+ORANGE = 'orange'
+ORANGERED = 'orangered'
+ORCHID = 'orchid'
+PALEGOLDENROD = 'palegoldenrod'
+PALEGREEN = 'palegreen'
+PALETURQUOISE = 'paleturquoise'
+PALEVIOLETRED = 'palevioletred'
+PAPAYAWHIP = 'papayawhip'
+PEACHPUFF = 'peachpuff'
+PERU = 'peru'
+PINK = 'pink'
+PLUM = 'plum'
+POWDERBLUE = 'powderblue'
+PURPLE = 'purple'
+RED = 'red'
+ROSYBROWN = 'rosybrown'
+ROYALBLUE = 'royalblue'
+SADDLEBROWN = 'saddlebrown'
+SALMON = 'salmon'
+SANDYBROWN = 'sandybrown'
+SEAGREEN = 'seagreen'
+SEASHELL = 'seashell'
+SIENNA = 'sienna'
+SILVER = 'silver'
+SKYBLUE = 'skyblue'
+SLATEBLUE = 'slateblue'
+SLATEGRAY = 'slategray'
+SLATEGREY = 'slategrey'
+SNOW = 'snow'
+SPRINGGREEN = 'springgreen'
+STEELBLUE = 'steelblue'
+TAN = 'tan'
+TEAL = 'teal'
+THISTLE = 'thistle'
+TOMATO = 'tomato'
+TURQUOISE = 'turquoise'
+VIOLET = 'violet'
+WHEAT = 'wheat'
+WHITE = 'white'
+WHITESMOKE = 'whitesmoke'
+YELLOW = 'yellow'
+YELLOWGREEN = 'yellowgreen'
+
+class quasar:
+    PRIMARY = 'primary'
+    SECONDARY = 'secondary'
+    ACCENT = 'accent'
+    DARK = 'dark'
+    POSITIVE = 'positive'
+    NEGATIVE = 'negative'
+    INFO = 'info'
+    WARNING = 'warning'
+    RED = 'red'
+    RED_1 = 'red-1'
+    RED_2 = 'red-2'
+    RED_3 = 'red-3'
+    RED_4 = 'red-4'
+    RED_5 = 'red-5'
+    RED_6 = 'red-6'
+    RED_7 = 'red-7'
+    RED_8 = 'red-8'
+    RED_9 = 'red-9'
+    RED_10 = 'red-10'
+    RED_11 = 'red-11'
+    RED_12 = 'red-12'
+    RED_13 = 'red-13'
+    RED_14 = 'red-14'
+    PINK = 'pink'
+    PINK_1 = 'pink-1'
+    PINK_2 = 'pink-2'
+    PINK_3 = 'pink-3'
+    PINK_4 = 'pink-4'
+    PINK_5 = 'pink-5'
+    PINK_6 = 'pink-6'
+    PINK_7 = 'pink-7'
+    PINK_8 = 'pink-8'
+    PINK_9 = 'pink-9'
+    PINK_10 = 'pink-10'
+    PINK_11 = 'pink-11'
+    PINK_12 = 'pink-12'
+    PINK_13 = 'pink-13'
+    PINK_14 = 'pink-14'
+    PURPLE = 'purple'
+    PURPLE_1 = 'purple-1'
+    PURPLE_2 = 'purple-2'
+    PURPLE_3 = 'purple-3'
+    PURPLE_4 = 'purple-4'
+    PURPLE_5 = 'purple-5'
+    PURPLE_6 = 'purple-6'
+    PURPLE_7 = 'purple-7'
+    PURPLE_8 = 'purple-8'
+    PURPLE_9 = 'purple-9'
+    PURPLE_10 = 'purple-10'
+    PURPLE_11 = 'purple-11'
+    PURPLE_12 = 'purple-12'
+    PURPLE_13 = 'purple-13'
+    PURPLE_14 = 'purple-14'
+    DEEP_PURPLE = 'deep-purple'
+    DEEP_PURPLE_1 = 'deep-purple-1'
+    DEEP_PURPLE_2 = 'deep-purple-2'
+    DEEP_PURPLE_3 = 'deep-purple-3'
+    DEEP_PURPLE_4 = 'deep-purple-4'
+    DEEP_PURPLE_5 = 'deep-purple-5'
+    DEEP_PURPLE_6 = 'deep-purple-6'
+    DEEP_PURPLE_7 = 'deep-purple-7'
+    DEEP_PURPLE_8 = 'deep-purple-8'
+    DEEP_PURPLE_9 = 'deep-purple-9'
+    DEEP_PURPLE_10 = 'deep-purple-10'
+    DEEP_PURPLE_11 = 'deep-purple-11'
+    DEEP_PURPLE_12 = 'deep-purple-12'
+    DEEP_PURPLE_13 = 'deep-purple-13'
+    DEEP_PURPLE_14 = 'deep-purple-14'
+    INDIGO = 'indigo'
+    INDIGO_1 = 'indigo-1'
+    INDIGO_2 = 'indigo-2'
+    INDIGO_3 = 'indigo-3'
+    INDIGO_4 = 'indigo-4'
+    INDIGO_5 = 'indigo-5'
+    INDIGO_6 = 'indigo-6'
+    INDIGO_7 = 'indigo-7'
+    INDIGO_8 = 'indigo-8'
+    INDIGO_9 = 'indigo-9'
+    INDIGO_10 = 'indigo-10'
+    INDIGO_11 = 'indigo-11'
+    INDIGO_12 = 'indigo-12'
+    INDIGO_13 = 'indigo-13'
+    INDIGO_14 = 'indigo-14'
+    BLUE = 'blue'
+    BLUE_1 = 'blue-1'
+    BLUE_2 = 'blue-2'
+    BLUE_3 = 'blue-3'
+    BLUE_4 = 'blue-4'
+    BLUE_5 = 'blue-5'
+    BLUE_6 = 'blue-6'
+    BLUE_7 = 'blue-7'
+    BLUE_8 = 'blue-8'
+    BLUE_9 = 'blue-9'
+    BLUE_10 = 'blue-10'
+    BLUE_11 = 'blue-11'
+    BLUE_12 = 'blue-12'
+    BLUE_13 = 'blue-13'
+    BLUE_14 = 'blue-14'
+    LIGHT_BLUE = 'light-blue'
+    LIGHT_BLUE_1 = 'light-blue-1'
+    LIGHT_BLUE_2 = 'light-blue-2'
+    LIGHT_BLUE_3 = 'light-blue-3'
+    LIGHT_BLUE_4 = 'light-blue-4'
+    LIGHT_BLUE_5 = 'light-blue-5'
+    LIGHT_BLUE_6 = 'light-blue-6'
+    LIGHT_BLUE_7 = 'light-blue-7'
+    LIGHT_BLUE_8 = 'light-blue-8'
+    LIGHT_BLUE_9 = 'light-blue-9'
+    LIGHT_BLUE_10 = 'light-blue-10'
+    LIGHT_BLUE_11 = 'light-blue-11'
+    LIGHT_BLUE_12 = 'light-blue-12'
+    LIGHT_BLUE_13 = 'light-blue-13'
+    LIGHT_BLUE_14 = 'light-blue-14'
+    CYAN = 'cyan'
+    CYAN_1 = 'cyan-1'
+    CYAN_2 = 'cyan-2'
+    CYAN_3 = 'cyan-3'
+    CYAN_4 = 'cyan-4'
+    CYAN_5 = 'cyan-5'
+    CYAN_6 = 'cyan-6'
+    CYAN_7 = 'cyan-7'
+    CYAN_8 = 'cyan-8'
+    CYAN_9 = 'cyan-9'
+    CYAN_10 = 'cyan-10'
+    CYAN_11 = 'cyan-11'
+    CYAN_12 = 'cyan-12'
+    CYAN_13 = 'cyan-13'
+    CYAN_14 = 'cyan-14'
+    TEAL = 'teal'
+    TEAL_1 = 'teal-1'
+    TEAL_2 = 'teal-2'
+    TEAL_3 = 'teal-3'
+    TEAL_4 = 'teal-4'
+    TEAL_5 = 'teal-5'
+    TEAL_6 = 'teal-6'
+    TEAL_7 = 'teal-7'
+    TEAL_8 = 'teal-8'
+    TEAL_9 = 'teal-9'
+    TEAL_10 = 'teal-10'
+    TEAL_11 = 'teal-11'
+    TEAL_12 = 'teal-12'
+    TEAL_13 = 'teal-13'
+    TEAL_14 = 'teal-14'
+    GREEN = 'green'
+    GREEN_1 = 'green-1'
+    GREEN_2 = 'green-2'
+    GREEN_3 = 'green-3'
+    GREEN_4 = 'green-4'
+    GREEN_5 = 'green-5'
+    GREEN_6 = 'green-6'
+    GREEN_7 = 'green-7'
+    GREEN_8 = 'green-8'
+    GREEN_9 = 'green-9'
+    GREEN_10 = 'green-10'
+    GREEN_11 = 'green-11'
+    GREEN_12 = 'green-12'
+    GREEN_13 = 'green-13'
+    GREEN_14 = 'green-14'
+    LIGHT_GREEN = 'light-green'
+    LIGHT_GREEN_1 = 'light-green-1'
+    LIGHT_GREEN_2 = 'light-green-2'
+    LIGHT_GREEN_3 = 'light-green-3'
+    LIGHT_GREEN_4 = 'light-green-4'
+    LIGHT_GREEN_5 = 'light-green-5'
+    LIGHT_GREEN_6 = 'light-green-6'
+    LIGHT_GREEN_7 = 'light-green-7'
+    LIGHT_GREEN_8 = 'light-green-8'
+    LIGHT_GREEN_9 = 'light-green-9'
+    LIGHT_GREEN_10 = 'light-green-10'
+    LIGHT_GREEN_11 = 'light-green-11'
+    LIGHT_GREEN_12 = 'light-green-12'
+    LIGHT_GREEN_13 = 'light-green-13'
+    LIGHT_GREEN_14 = 'light-green-14'
+    LIME = 'lime'
+    LIME_1 = 'lime-1'
+    LIME_2 = 'lime-2'
+    LIME_3 = 'lime-3'
+    LIME_4 = 'lime-4'
+    LIME_5 = 'lime-5'
+    LIME_6 = 'lime-6'
+    LIME_7 = 'lime-7'
+    LIME_8 = 'lime-8'
+    LIME_9 = 'lime-9'
+    LIME_10 = 'lime-10'
+    LIME_11 = 'lime-11'
+    LIME_12 = 'lime-12'
+    LIME_13 = 'lime-13'
+    LIME_14 = 'lime-14'
+    YELLOW = 'yellow'
+    YELLOW_1 = 'yellow-1'
+    YELLOW_2 = 'yellow-2'
+    YELLOW_3 = 'yellow-3'
+    YELLOW_4 = 'yellow-4'
+    YELLOW_5 = 'yellow-5'
+    YELLOW_6 = 'yellow-6'
+    YELLOW_7 = 'yellow-7'
+    YELLOW_8 = 'yellow-8'
+    YELLOW_9 = 'yellow-9'
+    YELLOW_10 = 'yellow-10'
+    YELLOW_11 = 'yellow-11'
+    YELLOW_12 = 'yellow-12'
+    YELLOW_13 = 'yellow-13'
+    YELLOW_14 = 'yellow-14'
+    AMBER = 'amber'
+    AMBER_1 = 'amber-1'
+    AMBER_2 = 'amber-2'
+    AMBER_3 = 'amber-3'
+    AMBER_4 = 'amber-4'
+    AMBER_5 = 'amber-5'
+    AMBER_6 = 'amber-6'
+    AMBER_7 = 'amber-7'
+    AMBER_8 = 'amber-8'
+    AMBER_9 = 'amber-9'
+    AMBER_10 = 'amber-10'
+    AMBER_11 = 'amber-11'
+    AMBER_12 = 'amber-12'
+    AMBER_13 = 'amber-13'
+    AMBER_14 = 'amber-14'
+    ORANGE = 'orange'
+    ORANGE_1 = 'orange-1'
+    ORANGE_2 = 'orange-2'
+    ORANGE_3 = 'orange-3'
+    ORANGE_4 = 'orange-4'
+    ORANGE_5 = 'orange-5'
+    ORANGE_6 = 'orange-6'
+    ORANGE_7 = 'orange-7'
+    ORANGE_8 = 'orange-8'
+    ORANGE_9 = 'orange-9'
+    ORANGE_10 = 'orange-10'
+    ORANGE_11 = 'orange-11'
+    ORANGE_12 = 'orange-12'
+    ORANGE_13 = 'orange-13'
+    ORANGE_14 = 'orange-14'
+    DEEP_ORANGE = 'deep-orange'
+    DEEP_ORANGE_1 = 'deep-orange-1'
+    DEEP_ORANGE_2 = 'deep-orange-2'
+    DEEP_ORANGE_3 = 'deep-orange-3'
+    DEEP_ORANGE_4 = 'deep-orange-4'
+    DEEP_ORANGE_5 = 'deep-orange-5'
+    DEEP_ORANGE_6 = 'deep-orange-6'
+    DEEP_ORANGE_7 = 'deep-orange-7'
+    DEEP_ORANGE_8 = 'deep-orange-8'
+    DEEP_ORANGE_9 = 'deep-orange-9'
+    DEEP_ORANGE_10 = 'deep-orange-10'
+    DEEP_ORANGE_11 = 'deep-orange-11'
+    DEEP_ORANGE_12 = 'deep-orange-12'
+    DEEP_ORANGE_13 = 'deep-orange-13'
+    DEEP_ORANGE_14 = 'deep-orange-14'
+    BROWN = 'brown'
+    BROWN_1 = 'brown-1'
+    BROWN_2 = 'brown-2'
+    BROWN_3 = 'brown-3'
+    BROWN_4 = 'brown-4'
+    BROWN_5 = 'brown-5'
+    BROWN_6 = 'brown-6'
+    BROWN_7 = 'brown-7'
+    BROWN_8 = 'brown-8'
+    BROWN_9 = 'brown-9'
+    BROWN_10 = 'brown-10'
+    BROWN_11 = 'brown-11'
+    BROWN_12 = 'brown-12'
+    BROWN_13 = 'brown-13'
+    BROWN_14 = 'brown-14'
+    GREY = 'grey'
+    GREY_1 = 'grey-1'
+    GREY_2 = 'grey-2'
+    GREY_3 = 'grey-3'
+    GREY_4 = 'grey-4'
+    GREY_5 = 'grey-5'
+    GREY_6 = 'grey-6'
+    GREY_7 = 'grey-7'
+    GREY_8 = 'grey-8'
+    GREY_9 = 'grey-9'
+    GREY_10 = 'grey-10'
+    GREY_11 = 'grey-11'
+    GREY_12 = 'grey-12'
+    GREY_13 = 'grey-13'
+    GREY_14 = 'grey-14'
+    BLUE_GREY = 'blue-grey'
+    BLUE_GREY_1 = 'blue-grey-1'
+    BLUE_GREY_2 = 'blue-grey-2'
+    BLUE_GREY_3 = 'blue-grey-3'
+    BLUE_GREY_4 = 'blue-grey-4'
+    BLUE_GREY_5 = 'blue-grey-5'
+    BLUE_GREY_6 = 'blue-grey-6'
+    BLUE_GREY_7 = 'blue-grey-7'
+    BLUE_GREY_8 = 'blue-grey-8'
+    BLUE_GREY_9 = 'blue-grey-9'
+    BLUE_GREY_10 = 'blue-grey-10'
+    BLUE_GREY_11 = 'blue-grey-11'
+    BLUE_GREY_12 = 'blue-grey-12'
+    BLUE_GREY_13 = 'blue-grey-13'
+    BLUE_GREY_14 = 'blue-grey-14'
+
+class tailwind:
+    INHERIT = 'inherit'
+    CURRENT = 'current'
+    TRANSPARENT = 'transparent'
+    BLACK = 'black'
+    WHITE = 'white'
+    SLATE_50 = 'slate-50'
+    SLATE_100 = 'slate-100'
+    SLATE_200 = 'slate-200'
+    SLATE_300 = 'slate-300'
+    SLATE_400 = 'slate-400'
+    SLATE_500 = 'slate-500'
+    SLATE_600 = 'slate-600'
+    SLATE_700 = 'slate-700'
+    SLATE_800 = 'slate-800'
+    SLATE_900 = 'slate-900'
+    SLATE_950 = 'slate-950'
+    GRAY_50 = 'gray-50'
+    GRAY_100 = 'gray-100'
+    GRAY_200 = 'gray-200'
+    GRAY_300 = 'gray-300'
+    GRAY_400 = 'gray-400'
+    GRAY_500 = 'gray-500'
+    GRAY_600 = 'gray-600'
+    GRAY_700 = 'gray-700'
+    GRAY_800 = 'gray-800'
+    GRAY_900 = 'gray-900'
+    GRAY_950 = 'gray-950'
+    ZINC_50 = 'zinc-50'
+    ZINC_100 = 'zinc-100'
+    ZINC_200 = 'zinc-200'
+    ZINC_300 = 'zinc-300'
+    ZINC_400 = 'zinc-400'
+    ZINC_500 = 'zinc-500'
+    ZINC_600 = 'zinc-600'
+    ZINC_700 = 'zinc-700'
+    ZINC_800 = 'zinc-800'
+    ZINC_900 = 'zinc-900'
+    ZINC_950 = 'zinc-950'
+    NEUTRAL_50 = 'neutral-50'
+    NEUTRAL_100 = 'neutral-100'
+    NEUTRAL_200 = 'neutral-200'
+    NEUTRAL_300 = 'neutral-300'
+    NEUTRAL_400 = 'neutral-400'
+    NEUTRAL_500 = 'neutral-500'
+    NEUTRAL_600 = 'neutral-600'
+    NEUTRAL_700 = 'neutral-700'
+    NEUTRAL_800 = 'neutral-800'
+    NEUTRAL_900 = 'neutral-900'
+    NEUTRAL_950 = 'neutral-950'
+    STONE_50 = 'stone-50'
+    STONE_100 = 'stone-100'
+    STONE_200 = 'stone-200'
+    STONE_300 = 'stone-300'
+    STONE_400 = 'stone-400'
+    STONE_500 = 'stone-500'
+    STONE_600 = 'stone-600'
+    STONE_700 = 'stone-700'
+    STONE_800 = 'stone-800'
+    STONE_900 = 'stone-900'
+    STONE_950 = 'stone-950'
+    RED_50 = 'red-50'
+    RED_100 = 'red-100'
+    RED_200 = 'red-200'
+    RED_300 = 'red-300'
+    RED_400 = 'red-400'
+    RED_500 = 'red-500'
+    RED_600 = 'red-600'
+    RED_700 = 'red-700'
+    RED_800 = 'red-800'
+    RED_900 = 'red-900'
+    RED_950 = 'red-950'
+    ORANGE_50 = 'orange-50'
+    ORANGE_100 = 'orange-100'
+    ORANGE_200 = 'orange-200'
+    ORANGE_300 = 'orange-300'
+    ORANGE_400 = 'orange-400'
+    ORANGE_500 = 'orange-500'
+    ORANGE_600 = 'orange-600'
+    ORANGE_700 = 'orange-700'
+    ORANGE_800 = 'orange-800'
+    ORANGE_900 = 'orange-900'
+    ORANGE_950 = 'orange-950'
+    AMBER_50 = 'amber-50'
+    AMBER_100 = 'amber-100'
+    AMBER_200 = 'amber-200'
+    AMBER_300 = 'amber-300'
+    AMBER_400 = 'amber-400'
+    AMBER_500 = 'amber-500'
+    AMBER_600 = 'amber-600'
+    AMBER_700 = 'amber-700'
+    AMBER_800 = 'amber-800'
+    AMBER_900 = 'amber-900'
+    AMBER_950 = 'amber-950'
+    YELLOW_50 = 'yellow-50'
+    YELLOW_100 = 'yellow-100'
+    YELLOW_200 = 'yellow-200'
+    YELLOW_300 = 'yellow-300'
+    YELLOW_400 = 'yellow-400'
+    YELLOW_500 = 'yellow-500'
+    YELLOW_600 = 'yellow-600'
+    YELLOW_700 = 'yellow-700'
+    YELLOW_800 = 'yellow-800'
+    YELLOW_900 = 'yellow-900'
+    YELLOW_950 = 'yellow-950'
+    LIME_50 = 'lime-50'
+    LIME_100 = 'lime-100'
+    LIME_200 = 'lime-200'
+    LIME_300 = 'lime-300'
+    LIME_400 = 'lime-400'
+    LIME_500 = 'lime-500'
+    LIME_600 = 'lime-600'
+    LIME_700 = 'lime-700'
+    LIME_800 = 'lime-800'
+    LIME_900 = 'lime-900'
+    LIME_950 = 'lime-950'
+    GREEN_50 = 'green-50'
+    GREEN_100 = 'green-100'
+    GREEN_200 = 'green-200'
+    GREEN_300 = 'green-300'
+    GREEN_400 = 'green-400'
+    GREEN_500 = 'green-500'
+    GREEN_600 = 'green-600'
+    GREEN_700 = 'green-700'
+    GREEN_800 = 'green-800'
+    GREEN_900 = 'green-900'
+    GREEN_950 = 'green-950'
+    EMERALD_50 = 'emerald-50'
+    EMERALD_100 = 'emerald-100'
+    EMERALD_200 = 'emerald-200'
+    EMERALD_300 = 'emerald-300'
+    EMERALD_400 = 'emerald-400'
+    EMERALD_500 = 'emerald-500'
+    EMERALD_600 = 'emerald-600'
+    EMERALD_700 = 'emerald-700'
+    EMERALD_800 = 'emerald-800'
+    EMERALD_900 = 'emerald-900'
+    EMERALD_950 = 'emerald-950'
+    TEAL_50 = 'teal-50'
+    TEAL_100 = 'teal-100'
+    TEAL_200 = 'teal-200'
+    TEAL_300 = 'teal-300'
+    TEAL_400 = 'teal-400'
+    TEAL_500 = 'teal-500'
+    TEAL_600 = 'teal-600'
+    TEAL_700 = 'teal-700'
+    TEAL_800 = 'teal-800'
+    TEAL_900 = 'teal-900'
+    TEAL_950 = 'teal-950'
+    CYAN_50 = 'cyan-50'
+    CYAN_100 = 'cyan-100'
+    CYAN_200 = 'cyan-200'
+    CYAN_300 = 'cyan-300'
+    CYAN_400 = 'cyan-400'
+    CYAN_500 = 'cyan-500'
+    CYAN_600 = 'cyan-600'
+    CYAN_700 = 'cyan-700'
+    CYAN_800 = 'cyan-800'
+    CYAN_900 = 'cyan-900'
+    CYAN_950 = 'cyan-950'
+    SKY_50 = 'sky-50'
+    SKY_100 = 'sky-100'
+    SKY_200 = 'sky-200'
+    SKY_300 = 'sky-300'
+    SKY_400 = 'sky-400'
+    SKY_500 = 'sky-500'
+    SKY_600 = 'sky-600'
+    SKY_700 = 'sky-700'
+    SKY_800 = 'sky-800'
+    SKY_900 = 'sky-900'
+    SKY_950 = 'sky-950'
+    BLUE_50 = 'blue-50'
+    BLUE_100 = 'blue-100'
+    BLUE_200 = 'blue-200'
+    BLUE_300 = 'blue-300'
+    BLUE_400 = 'blue-400'
+    BLUE_500 = 'blue-500'
+    BLUE_600 = 'blue-600'
+    BLUE_700 = 'blue-700'
+    BLUE_800 = 'blue-800'
+    BLUE_900 = 'blue-900'
+    BLUE_950 = 'blue-950'
+    INDIGO_50 = 'indigo-50'
+    INDIGO_100 = 'indigo-100'
+    INDIGO_200 = 'indigo-200'
+    INDIGO_300 = 'indigo-300'
+    INDIGO_400 = 'indigo-400'
+    INDIGO_500 = 'indigo-500'
+    INDIGO_600 = 'indigo-600'
+    INDIGO_700 = 'indigo-700'
+    INDIGO_800 = 'indigo-800'
+    INDIGO_900 = 'indigo-900'
+    INDIGO_950 = 'indigo-950'
+    VIOLET_50 = 'violet-50'
+    VIOLET_100 = 'violet-100'
+    VIOLET_200 = 'violet-200'
+    VIOLET_300 = 'violet-300'
+    VIOLET_400 = 'violet-400'
+    VIOLET_500 = 'violet-500'
+    VIOLET_600 = 'violet-600'
+    VIOLET_700 = 'violet-700'
+    VIOLET_800 = 'violet-800'
+    VIOLET_900 = 'violet-900'
+    VIOLET_950 = 'violet-950'
+    PURPLE_50 = 'purple-50'
+    PURPLE_100 = 'purple-100'
+    PURPLE_200 = 'purple-200'
+    PURPLE_300 = 'purple-300'
+    PURPLE_400 = 'purple-400'
+    PURPLE_500 = 'purple-500'
+    PURPLE_600 = 'purple-600'
+    PURPLE_700 = 'purple-700'
+    PURPLE_800 = 'purple-800'
+    PURPLE_900 = 'purple-900'
+    PURPLE_950 = 'purple-950'
+    FUCHSIA_50 = 'fuchsia-50'
+    FUCHSIA_100 = 'fuchsia-100'
+    FUCHSIA_200 = 'fuchsia-200'
+    FUCHSIA_300 = 'fuchsia-300'
+    FUCHSIA_400 = 'fuchsia-400'
+    FUCHSIA_500 = 'fuchsia-500'
+    FUCHSIA_600 = 'fuchsia-600'
+    FUCHSIA_700 = 'fuchsia-700'
+    FUCHSIA_800 = 'fuchsia-800'
+    FUCHSIA_900 = 'fuchsia-900'
+    FUCHSIA_950 = 'fuchsia-950'
+    PINK_50 = 'pink-50'
+    PINK_100 = 'pink-100'
+    PINK_200 = 'pink-200'
+    PINK_300 = 'pink-300'
+    PINK_400 = 'pink-400'
+    PINK_500 = 'pink-500'
+    PINK_600 = 'pink-600'
+    PINK_700 = 'pink-700'
+    PINK_800 = 'pink-800'
+    PINK_900 = 'pink-900'
+    PINK_950 = 'pink-950'
+    ROSE_50 = 'rose-50'
+    ROSE_100 = 'rose-100'
+    ROSE_200 = 'rose-200'
+    ROSE_300 = 'rose-300'
+    ROSE_400 = 'rose-400'
+    ROSE_500 = 'rose-500'
+    ROSE_600 = 'rose-600'
+    ROSE_700 = 'rose-700'
+    ROSE_800 = 'rose-800'
+    ROSE_900 = 'rose-900'
+    ROSE_950 = 'rose-950'
diff --git a/nicegui/elements/mixins/color_elements.py b/nicegui/elements/mixins/color_elements.py
index 343bcb6ce..4e3aa947f 100644
--- a/nicegui/elements/mixins/color_elements.py
+++ b/nicegui/elements/mixins/color_elements.py
@@ -3,12 +3,12 @@
 from ...element import Element
 from ...tailwind_types.background_color import BackgroundColor
 
-QUASAR_COLORS = {'primary', 'secondary', 'accent', 'dark', 'positive', 'negative', 'info', 'warning'}
+QUASAR_COLORS = ['primary', 'secondary', 'accent', 'dark', 'positive', 'negative', 'info', 'warning']
 for color in ['red', 'pink', 'purple', 'deep-purple', 'indigo', 'blue', 'light-blue', 'cyan', 'teal', 'green',
               'light-green', 'lime', 'yellow', 'amber', 'orange', 'deep-orange', 'brown', 'grey', 'blue-grey']:
-    QUASAR_COLORS.add(color)
+    QUASAR_COLORS.append(color)
     for i in range(1, 15):
-        QUASAR_COLORS.add(f'{color}-{i}')
+        QUASAR_COLORS.append(f'{color}-{i}')
 
 TAILWIND_COLORS = get_args(BackgroundColor)
 
diff --git a/tests/test_color.py b/tests/test_color.py
new file mode 100644
index 000000000..636231de5
--- /dev/null
+++ b/tests/test_color.py
@@ -0,0 +1,13 @@
+from nicegui import color, ui
+from nicegui.testing import Screen
+
+
+def test_color_constants(screen: Screen):
+    icon1 = ui.icon('home', color=color.RED)
+    icon2 = ui.icon('home', color=color.quasar.RED_5)
+    icon3 = ui.icon('home', color=color.tailwind.RED_500)
+
+    screen.open('/')
+    assert screen.find_element(icon1).value_of_css_property('color') == 'rgba(244, 67, 54, 1)'
+    assert screen.find_element(icon2).value_of_css_property('color') == 'rgba(239, 83, 80, 1)'
+    assert screen.find_element(icon3).value_of_css_property('color') == 'rgba(239, 68, 68, 1)'