LiOS-Colors is a browsable library of carefully curated colors, focused on translucent UI-friendly variants for modern interfaces.
@import url("https://data.colors.liosorg.com/translucent-colors.css");git submodule add https://github.com/LiOS-org/LiOS-Colors-Data.gitAfter submodule is added, in terminal run
npm run build@import url("${path-to-LiOS-Colors-Data}/dist/translucent-colors.css");Translucent colors works by using CSS variables to define a set of translucent color values that can be applied to elements in your design.
To use these colors, you must have the color in hex format and the color should also exist in LiOS-Colors database(verify by searching the color in the browse section).
Once you have the color in hex format and it exists in the database, you can use it in your CSS using variable names.
You can get the variable name by replacing # of the hex code with --, for example: #4b62d2 becomes --4b62d2.