CSS Colors List Converted to Roblox Lua - Use CSS color names in lua

Introduction:
Hello developers :slight_smile:! I am working on a plugin that is related to CSS and Roblox development.
Therefore, I have created a list of every CSS string color in Color3.
The module basically looks like this:
image
So I made a module for that instead of copying the whole list every time.

How is this useful?

This is useful for people who are familiar with some CSS color names (e.g. ForestGreen or Fuchsia), and feel more comfortable writing the Color name rather than Color3.fromRGB(255,0,255).
Or for people who make CSS-related things such as plugins, and want to easily get the colors.
For instance:

local colors = require(6454054091) --Require the CSS colors module.
script.Parent.BackgroundColor3 = colors["forestgreen"] --Get the Color3 of the ForestGreen Color

How to use?

This module is basically a list of CSS colors ordered by alphabetical order.
There are 2 ways to use it:

  1. Require the module and type the color name with lower-case letters
local colors = require(6454054091) --Require the CSS colors module.
local forestGreen = colors["forestgreen"] --Get the Color3 of the ForestGreen Color
  1. Require the module and use the Module:GetColor(colorName) function.
local colors = require(6454054091) --Require the CSS colors module.
local forestGreen = colors:GetColor("fORestGreeN")--Get the Color3 of the ForestGreen Color

In this option, you don’t have to worry about the letter’s case (Capital or Lower), since the function lowers it for you, so for long names such as LightGoldenRodYellow it is much easier.


What else does it include?

As of now, it includes 8 more functions:

module:GetBrickColor(colorName) - it gives you the BrickColor from the CSS color name.

colors:GetBrickColor("Fuchsia") -- "Hot pink" brick color is returned.

module:GetHEXColor(colorName) - it gives you the HEX string from the CSS color name.

colors:GetHEXColor("red") -- "#FF0000" color is returned.

module:GetCSSColorNameFromRGB(red, green, blue) - it gives the CSS color name from RGB values.

colors:GetCSSColorNameFromRGB(138,43,226) -- "blueviolet" is returned.

module:GetCSSColorNameFromHSV(hue, saturation, value) - it gives the CSS color name from HSV values.
module:GetCSSColorNameFromColor3(color) - it gives the CSS color name from Color3 entered.

colors:GetCSSColorNameFromColor3(Color3.new(255,255,255)) -- "white" is returned.

module:GetCSSColorNameFromBrickColor(color) - it gives the CSS color name from BrickColor entered.

colors:GetCSSColorNameFromBrickColor(BrickColor.new("Really blue")) -- "blue" is returned.

module:GetCSSColorNameFromHEX(hex) - it gives the CSS color name from the HEX string.

colors:GetCSSColorNameFromHEX("#0000FF") -- "blue" is returned.

module:Random() - it gives a Random CSS Color3 Value.

colors:Random() -- a Random CSS Color is returned.

Error Handling

There are a few error messages:
1.Color3 or BrickColor wasn’t found.
2.No CSS Color was found from RGB
3.No CSS Color was found from HSV
4.No CSS Color was found from Color3
5.No CSS Color was found from BrickColor
6. Expected type got wrong type messages
If you get nil from colors:GetColor(), it means that no color was found


Want to get rid of the warnings? Use the module:ToggleWarnings(false) function :slightly_smiling_face:
The only warnings that won’t be disabled are the type errors.


local colors = require(6454054091) --The CSS color module
colors:ToggleWarnings(false) --Disable warnings
local color = colors:GetCSSColorNameFromRGB(1,4,3) --A color that doesn't exist
--The color is nil, but you won't receive a warning that it doesn't exist ^

Links:

https://www.roblox.com/library/6454054091/CSS-Colors-to-Lua
To require:

local colors = require(6454054091) --The CSS color module

The plugin:
That’s right, I finished the plugin that utilizes this module :slightly_smiling_face: :

Thank you for reading :grinning:, I hope it helps!
Have a wonderful day/night!

Yes, I did actually spend 3 hours listing every color from the website in the dictionary, and making the functions :joy: :rofl: :joy: :rofl:

7 Likes

Even though I probably wouldn’t use this for my game, I commend you for taking 3 hours out of your day to do a very tedious task for the community

(This isn’t bad, I just prefer regular color3)

1 Like

A lot of these colors are already found in the color palette or through the autocomplete for BrickColor.new, so I am not too sure how helpful this would be, especially since some colors are extremely niche and therefore may not see too many use across many games. Some colors might be similar, but players don’t really care.

You could have also just scraped that webpage for the colors, but props to you for doing it by hand

3 Likes

Yeah I know, I did it since I am making a plugin related to CSS and needed the CSS names.
So I can change properties like this:

TextLabel {
    color: blue;
}

Since I already got it done, I wanted to share it so others won’t have to :slight_smile:

That’s true, I had time and wanted to list them all, so I did it :rofl:.

Thanks, although what do you mean by “scraped that webpage”?

Thanks, and yeah I totally understand. This is more useful to people who want to make it use CSS things since Color3 and BrickColors exist. :slight_smile:

1 Like

This is incredible! Helpful for CSS devs though. But, that’s good spent 3 hours of work :joy:

2 Likes

Now this is a useful tool. However I probably won’t be using it. I would prefer it if it was a plugin so you can see what it looks like instantly (if you need help making one, I’ve made a few)

2 Likes

Sure :grinning:, but not as a replacement, as an addition since this can be used in code.
So basically a GUI with R G B options to see the color and the name?

1 Like

Update 1:

Functions

Added Module:Random() -- Get a random CSS Color value

Added Module:GetHEXColor(colorName) -- Get the HEX string color from the CSS Color name

Added Module:GetCSSColorNameFromHEX(hex) -- Get the CSS Color Name from the HEX string.

Error Handling

Added Module:ToggleWarnings(on) -- Disable basic warnings such as No CSS color was found

Upcoming:

1. A plugin that utilizes this module.

2. Ability to decide whether errors should be errors, warnings, or prints.

3. Module:ApplyTo(instance, property), ability to easily color a specific instance property.

If you have any suggestions, please let me know :slightly_smiling_face: .
The plugin will be available very soon :wink:

1 Like

I finished making the plugin :slightly_smiling_face: .
It’s here if anyone needs it:

1 Like