saberbud/QDarkStyleSheet
1
0
Fork 0
mirror of https://github.com/ColinDuquesnoy/QDarkStyleSheet.git synced 2026-08-30 17:10:31 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
669f2ad8d0d9d4697edd02ea845271abc8d74fef
QDarkStyleSheet/docs/colorreference.md
T
Isabela Presedo-Floyd 669f2ad8d0 Add tables to docs
2020-12-29 14:55:57 -08:00

262 lines
7.4 KiB
Markdown
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Colors
## Color System
The color system is the source of the colors that themes draw from. Each has a
range of values from `0` (black `#000000`) to `150` (white `#ffffff`). Not all
colors are or should be used in every theme, but the scales provide a chance to
see the colors in a larger context and makes it easy to switch out colors as desired.
The number assigned to each estimates how light or dark that color is. For parts of
an interface that are interactive, have text, or have any other important information,
please use colors combinations that have at least a difference of 20 where colors
overlap. Depending on the colors, you may need more contrast to create a theme that
meets accessibility standards about contrast or color blindness.
### Gray
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | ![ ](https://user-images.githubusercontent.com/50221806/103318619-db43f580-49e3-11eb-9747-fa8f49890d4c.png) |
| B10 | `#19232D` | ![ ]() |
| B20 | `#262E38` | ![ ]() |
| B30 | `#37414F` | ![ ]() |
| B40 | `#455364` | ![ ]() |
| B50 | `#54687A` | ![ ]() |
| B60 | `#60798B` | ![ ]() |
| B70 | `#788D9C` | ![ ]() |
| B80 | `#9DA9B5` | ![ ]() | 
| B90 | `#CBCACA` | ![ ]() |
| B100 | `#D9D8D8` | ![ ]() |
| B110 | `#E1E1E1` | ![ ]() |
| B120 | `#EEEEEE` | ![ ]() |
| B130 | `#F5F5F5` | ![ ]() |
| B140 | `#FAFAFA` | ![ ]() |
| B150 | `#FFFFFF` | ![ ]() |
### Blue
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#062647` | |
| B20 | `#26486B` | |
| B30 | `#375A7F` | |
| B40 | `#346792` | |
| B50 | `#1A72BB` | |
| B60 | `#057DCE` | |
| B70 | `#259AE9` | |
| B80 | `#37AEFE` | | 
| B90 | `#73C7FF` | |
| B100 | `#9FD9FF` | |
| B110 | `#C2E3FA` | |
| B120 | `#CEEBFF` | |
| B130 | `#DAF0FF` | |
| B140 | `#F5FBFF` | |
| B150 | `#FFFFFF` | |
### Green
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#064738` | |
| B20 | `#055C49` | |
| B30 | `#007A5E` | |
| B40 | `#008760` | |
| B50 | `#019D70` | |
| B60 | `#02BA85` | |
| B70 | `#20C997` | |
| B80 | `#44DEB0` | | 
| B90 | `#3BEBB7` | |
| B100 | `#88F2D3` | |
| B110 | `#B0F5E1` | |
| B120 | `#D1FBEE` | |
| B130 | `#E4FFF7` | |
| B140 | `#F5FFFD` | |
| B150 | `#FFFFFF` | |
### Red
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#470606` | |
| B20 | `#760B0B` | |
| B30 | `#AF0F0F` | |
| B40 | `#D4140B` | |
| B50 | `#DE321F` | |
| B60 | `#E24232` | |
| B70 | `#E74C3C` | |
| B80 | `#F66657` | | 
| B90 | `#F88478` | |
| B100 | `#FFACA4` | |
| B110 | `#FFC3BD` | |
| B120 | `#FEDDDA` | |
| B130 | `#FFEEEE` | |
| B140 | `#FFF5F5` | |
| B150 | `#FFFFFF` | |
### Orange
| System Name | Value | Sample |
| --- | --- | --- |
| B0 | `#000000` | |
| B10 | `#471D06` | |
| B20 | `#692907` | |
| B30 | `#AB3E00` | |
| B40 | `#CE4B01` | |
| B50 | `#E05E15` | |
| B60 | `#E57004` | |
| B70 | `#F37E12` | |
| B80 | `#FF993B` | | 
| B90 | `#FFB950` | |
| B100 | `#FFCF84` | |
| B110 | `#FFC3BD` | |
| B120 | `#FFEACA` | |
| B130 | `#FFF3E2` | |
| B140 | `#FFFBF5` | |
| B150 | `#FFFFFF` | |
## Default Dark Mode
### Background
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| BACKGROUND_1 | B10 | `#19232D` | |
| BACKGROUND_2 | B20 | `#262E38` | |
| BACKGROUND_3 | B40 | `#455364` | |
| BACKGROUND_4 | B60 | `#60798B` | |
| BACKGROUND_5 | B60 | `#60798B` | |
### Text
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| TEXT_1 | B150 | `#FFFFFF` | |
| TEXT_2 | B140 | `#FAFAFA` | |
| TEXT_3 | B120 | `#EEEEEE` | |
| TEXT_4 | B100 | `#D9D8D8` | |
### Inverse Text
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| INVERSE_TEXT_1 | B150 | `#FFFFFF` | |
| INVERSE_TEXT_2 | B140 | `#FAFAFA` | |
| INVERSE_TEXT_3 | B120 | `#EEEEEE` | |
| INVERSE_TEXT_4 | B100 | `#D9D8D8` | |
### Accent
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| ACCENT_1 | B50 | `#1A72BB` | |
| ACCENT_2 | B70 | `#259AE9` | |
| ACCENT_3 | B90 | `#73C7FF` | |
| ACCENT_4 | B110 | `#C2E3FA` | |
### Border
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| BORDER_1 | B40 | `#455364` | |
| BORDER_2 | B50 | `#54687A` | |
| BORDER_3 | B60 | `#60798B` | |
| BORDER_4 | B70 | `#788D9C` | |
### Feedback
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| SUCCESS_1 | B40 | `#008760` | |
| SUCCESS_2 | B70 | `#20C997` | |
| SUCCESS_3 | B110 | `#B0F5E1` | |
| ERROR_1 | B40 | `#D4140B` | |
| ERROR_2 | B70 | `#E74C3C` | |
| ERROR_3 | B110 | `#FFC3BD` | |
| WARN_1 | B40 | `#CE4B01` | |
| WARN_2 | B70 | `#F37E12` | |
| WARN_3 | B110 | `#FFDDA7` | |
### Icon
ICON_1 = 'GRAY_140' `#FAFAFA`
ICON_2 = 'BLUE_70' `#259AE9`
ICON_3 = 'GREEN_70' `#20C997`
ICON_4 = 'RED_70' `#E74C3C`
ICON_5 = 'ORANGE_70' `#F37E12`
ICON_6 = 'GRAY_30' `#37414F`
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| ICON_1 | B140 | `#FAFAFA` | |
| ICON_2 | B70 | `#259AE9` | |
| ICON_3 | B70 | `#20C997` | |
| ICON_4 | B70 | `#E74C3C` | |
| ICON_5 | B70 | `#F37E12` | |
| ICON_6 | B30 | `#37414F` | |
### Highlight
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| HIGHLIGHT_1 | B50 | `#54687A` | |
| HIGHLIGHT_2 | B60 | `#60798B` | |
| HIGHLIGHT_3 | B70 | `#788D9C` | |
| HIGHLIGHT_4 | B80 | `#9DA9B5` | |
### Find
FIND_1 = 'BLUE_50' #90% `#1A72BB` `rgba(26,114,187,0.9)`
FIND_2 = 'BLUE_60' #90% `#057DCE` `rgba(5,125,206,0.9)`
FIND_3 = 'BLUE_70' #90% `#259AE9` `rgba(37,154,233,0.9)`
FIND_4 = 'BLUE_80' #90% `#37AEFE` `rgba(55,174,254,0.9)`
| Palette Name | System Name | Value | Sample |
| --- | --- | --- | --- |
| FIND_1 | B50 | `#1A72BB` | |
| FIND_2 | B60 | `#057DCE` | |
| FIND_3 | B70 | `#259AE9` | |
| FIND_4 | B80 | `#37AEFE` | |
## Default Light Mode
### Background
BACKGROUND_1 = 'GRAY_140' `#FAFAFA`
BACKGROUND_2 = 'GRAY_120' `#EEEEEE`
BACKGROUND_3 = 'GRAY_100' `#D9D8D8`
BACKGROUND_4 = 'GRAY_80' `#9DA9B5`
BACKGROUND_5 = 'GRAY_60' `#60798B`
### Text
TEXT_1 = 'GRAY_0' `#000000`
TEXT_2 = 'GRAY_10' `#19232D`
TEXT_3 = 'GRAY_20' `#262E38`
TEXT_4 = 'GRAY_40' `#455364`
### Inverse Text
INVERSE_TEXT_1 = 'GRAY_150' `#FFFFFF`
INVERSE_TEXT_2 = 'GRAY_140' `#FAFAFA`
INVERSE_TEXT_3 = 'GRAY_120' `#EEEEEE`
INVERSE_TEXT_4 = 'GRAY_100' `#D9D8D8`
### Accent
ACCENT_1 = 'BLUE_50' `#1A72BB`
ACCENT_2 = 'BLUE_70' `##259AE9`
ACCENT_3 = 'BLUE_90' `#73C7FF`
ACCENT_4 = 'BLUE_110' `#C2E3FA`
### Border
BORDER_1 = 'GRAY_40' `#455364`
BORDER_2 = 'GRAY_50' `#54687A`
BORDER_3 = 'GRAY_60' `#60798B`
BORDER_4 = 'GRAY_70' `#788D9C`
<!--Below colors may belong only to Spyder?-->
### Feedback
SUCCESS_1 = 'GREEN_40' `#008760`
SUCCESS_2 = 'GREEN_70' `#20C997`
SUCCESS_3 = 'GREEN_110' `#B0F5E1`
ERROR_1 = 'RED_40' `#D4140B`
ERROR_2 = 'RED_70' `#E74C3C`
ERROR_3 = 'RED_110' `#FFC3BD`
WARN_1 = 'ORANGE_40' `#CE4B01`
WARN_2 = 'ORANGE_70' `#F37E12`
WARN_3 = 'ORANGE_110' `#FFDDA7`
### Icon
ICON_1 = 'GRAY_30' `#37414F`
ICON_2 = 'BLUE_70' `#259AE9`
ICON_3 = 'GREEN_70' `#20C997`
ICON_4 = 'RED_70' `#E74C3C`
ICON_5 = 'ORANGE_70' `#F37E12`
ICON_6 = 'GRAY_140' `#FAFAFA`
### Highlight
HIGHLIGHT_1 = 'GRAY_100' #90% `#E1E1E1` `rgba(225,225,225,0.9)`
HIGHLIGHT_2 = 'GRAY_90' #90% `#CBCACA` `rgba(203,202,202,0.9)`
HIGHLIGHT_3 = 'GRAY_80' #90% `#9DA9B5` `rgba(157,169,181,0.9)`
HIGHLIGHT_4 = 'GRAY_70' #90% `#788D9C` `rgba(120,141,156,0.9)`
### Find
FIND_1 = 'BLUE_80' #90% `#37AEFE` `rgba(55,174,254,0.9)`
FIND_2 = 'BLUE_70' #90% `#259AE9` `rgba(37,154,233,0.9)`
FIND_3 = 'BLUE_60' #90% `#057DCE` `rgba(5,125,206,0.9)`
FIND_4 = 'BLUE_50' #90% `#1A72BB` `rgba(26,114,187,0.9)`
Reference in New Issue View Git Blame Copy Permalink