Skip to content

Commit

Permalink
Merge branch 'master' of github.com:Holzhaus/serato-tags
Browse files Browse the repository at this point in the history
  • Loading branch information
Holzhaus committed Apr 16, 2020
2 parents e0716a3 + e69bcc5 commit 19f97c5
Show file tree
Hide file tree
Showing 4 changed files with 133 additions and 101 deletions.
120 changes: 120 additions & 0 deletions docs/colors.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
# Colors

## Cue Colors

The on-screen representation of hotcue colors can differ slightly from what's stored in the `Serato Markers2` tag depending on wether Serato DJ Pro, Serato DJ Lite or Serato DJ Intro is used.
In contrast to Serato DJ Intro which just displays the colors unchanged, both Serato DJ Lite and Serato DJ Pro apply some kind of transformation or colorscheme, so that the actual color of the hotcue and the color show in the GUI are not the same.


### Serato DJ Intro

Serato DJ Intro lets the user choose from a palette of 18 different colors.

![Serato DJ Pro color picker](serato-dj-intro-colors.png)

This is the only Serato variant that displays the colors exactly like they are saved (i.e. without applying any transformation/colorscheme).

| # | Hot Cue | Saved | Displayed |
| -- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| 1 | 1 | ![CC0000](http://dummyimage.com/20x20/CC0000/CC0000.gif) `#CC0000` | ![CC0000](http://dummyimage.com/20x20/CC0000/CC0000.gif) `#CC0000` |
| 2 | | ![CC4400](http://dummyimage.com/20x20/CC4400/CC4400.gif) `#CC4400` | ![CC4400](http://dummyimage.com/20x20/CC4400/CC4400.gif) `#CC4400` |
| 3 | 2 | ![CC8800](http://dummyimage.com/20x20/CC8800/CC8800.gif) `#CC8800` | ![CC8800](http://dummyimage.com/20x20/CC8800/CC8800.gif) `#CC8800` |
| 4 | 4 | ![CCCC00](http://dummyimage.com/20x20/CCCC00/CCCC00.gif) `#CCCC00` | ![CCCC00](http://dummyimage.com/20x20/CCCC00/CCCC00.gif) `#CCCC00` |
| 5 | | ![88CC00](http://dummyimage.com/20x20/88CC00/88CC00.gif) `#88CC00` | ![88CC00](http://dummyimage.com/20x20/88CC00/88CC00.gif) `#88CC00` |
| 6 | | ![44CC00](http://dummyimage.com/20x20/44CC00/44CC00.gif) `#44CC00` | ![44CC00](http://dummyimage.com/20x20/44CC00/44CC00.gif) `#44CC00` |
| 7 | 5 | ![00CC00](http://dummyimage.com/20x20/00CC00/00CC00.gif) `#00CC00` | ![00CC00](http://dummyimage.com/20x20/00CC00/00CC00.gif) `#00CC00` |
| 8 | | ![00CC44](http://dummyimage.com/20x20/00CC44/00CC44.gif) `#00CC44` | ![00CC44](http://dummyimage.com/20x20/00CC44/00CC44.gif) `#00CC44` |
| 9 | | ![00CC88](http://dummyimage.com/20x20/00CC88/00CC88.gif) `#00CC88` | ![00CC88](http://dummyimage.com/20x20/00CC88/00CC88.gif) `#00CC88` |
| 10 | | ![00CCCC](http://dummyimage.com/20x20/00CCCC/00CCCC.gif) `#00CCCC` | ![00CCCC](http://dummyimage.com/20x20/00CCCC/00CCCC.gif) `#00CCCC` |
| 11 | | ![0088CC](http://dummyimage.com/20x20/0088CC/0088CC.gif) `#0088CC` | ![0088CC](http://dummyimage.com/20x20/0088CC/0088CC.gif) `#0088CC` |
| 12 | | ![0044CC](http://dummyimage.com/20x20/0044CC/0044CC.gif) `#0044CC` | ![0044CC](http://dummyimage.com/20x20/0044CC/0044CC.gif) `#0044CC` |
| 13 | 3 | ![0000CC](http://dummyimage.com/20x20/0000CC/0000CC.gif) `#0000CC` | ![0000CC](http://dummyimage.com/20x20/0000CC/0000CC.gif) `#0000CC` |
| 14 | | ![4400CC](http://dummyimage.com/20x20/4400CC/4400CC.gif) `#4400CC` | ![4400CC](http://dummyimage.com/20x20/4400CC/4400CC.gif) `#4400CC` |
| 15 | | ![8800CC](http://dummyimage.com/20x20/8800CC/8800CC.gif) `#8800CC` | ![8800CC](http://dummyimage.com/20x20/8800CC/8800CC.gif) `#8800CC` |
| 16 | | ![CC00CC](http://dummyimage.com/20x20/CC00CC/CC00CC.gif) `#CC00CC` | ![CC00CC](http://dummyimage.com/20x20/CC00CC/CC00CC.gif) `#CC00CC` |
| 17 | | ![CC0088](http://dummyimage.com/20x20/CC0088/CC0088.gif) `#CC0088` | ![CC0088](http://dummyimage.com/20x20/CC0088/CC0088.gif) `#CC0088` |
| 18 | | ![CC0044](http://dummyimage.com/20x20/CC0044/CC0044.gif) `#CC0044` | ![CC0044](http://dummyimage.com/20x20/CC0044/CC0044.gif) `#CC0044` |


### Serato DJ Lite

Serato DJ Lite only has 4 hotcues with predefined, unchangeable colors.

![Serato DJ Pro color picker](serato-dj-lite-colors.png)

Like Serato DJ Pro, the Lite version has a slight difference between saved and displayed colors (see below).

| # | Hot Cue | Saved | Displayed |
| -- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| 1 | 1 | ![CC0000](http://dummyimage.com/20x20/CC0000/CC0000.gif) `#CC0000` | ![C02626](http://dummyimage.com/20x20/C02626/C02626.gif) `#C02626` |
| 2 | 2 | ![CC8800](http://dummyimage.com/20x20/CC8800/CC8800.gif) `#CC8800` | ![F8821A](http://dummyimage.com/20x20/F8821A/F8821A.gif) `#F8821A` |
| 3 | 3 | ![0000CC](http://dummyimage.com/20x20/0000CC/0000CC.gif) `#0000CC` | ![173BA2](http://dummyimage.com/20x20/173BA2/173BA2.gif) `#173BA2` |
| 4 | 4 | ![CCCC00](http://dummyimage.com/20x20/CCCC00/CCCC00.gif) `#CCCC00` | ![FAC313](http://dummyimage.com/20x20/FAC313/FAC313.gif) `#FAC313` |


### Serato DJ Pro

Serato DJ Pro's color picker features 18 different colors:

![Serato DJ Pro color picker](serato-dj-pro-colors.png)

In contrast to Serato DJ Intro, the saved and displayed colors are slightly different, probably to be a better match for the GUI's colorscheme.

| # | Hot Cue | Saved | Displayed |
| -- | ------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| 1 | 1 | ![CC0000](http://dummyimage.com/20x20/CC0000/CC0000.gif) `#CC0000` | ![C02626](http://dummyimage.com/20x20/C02626/C02626.gif) `#C02626` |
| 2 | | ![CC4400](http://dummyimage.com/20x20/CC4400/CC4400.gif) `#CC4400` | ![DB4E27](http://dummyimage.com/20x20/DB4E27/DB4E27.gif) `#DB4E27` |
| 3 | 2 | ![CC8800](http://dummyimage.com/20x20/CC8800/CC8800.gif) `#CC8800` | ![F8821A](http://dummyimage.com/20x20/F8821A/F8821A.gif) `#F8821A` |
| 4 | 4 | ![CCCC00](http://dummyimage.com/20x20/CCCC00/CCCC00.gif) `#CCCC00` | ![FAC313](http://dummyimage.com/20x20/FAC313/FAC313.gif) `#FAC313` |
| 5 | | ![88CC00](http://dummyimage.com/20x20/88CC00/88CC00.gif) `#88CC00` | ![4EB648](http://dummyimage.com/20x20/4EB648/4EB648.gif) `#4EB648` |
| 6 | | ![44CC00](http://dummyimage.com/20x20/44CC00/44CC00.gif) `#44CC00` | ![006838](http://dummyimage.com/20x20/006838/006838.gif) `#006838` |
| 7 | 5 | ![00CC00](http://dummyimage.com/20x20/00CC00/00CC00.gif) `#00CC00` | ![1FAD26](http://dummyimage.com/20x20/1FAD26/1FAD26.gif) `#1FAD26` |
| 8 | | ![00CC44](http://dummyimage.com/20x20/00CC44/00CC44.gif) `#00CC44` | ![8DC63F](http://dummyimage.com/20x20/8DC63F/8DC63F.gif) `#8DC63F` |
| 9 | | ![00CC88](http://dummyimage.com/20x20/00CC88/00CC88.gif) `#00CC88` | ![2B3673](http://dummyimage.com/20x20/2B3673/2B3673.gif) `#2B3673` |
| 10 | 7 | ![00CCCC](http://dummyimage.com/20x20/00CCCC/00CCCC.gif) `#00CCCC` | ![1DBEBD](http://dummyimage.com/20x20/1DBEBD/1DBEBD.gif) `#1DBEBD` |
| 11 | | ![0088CC](http://dummyimage.com/20x20/0088CC/0088CC.gif) `#0088CC` | ![0F88CA](http://dummyimage.com/20x20/0F88CA/0F88CA.gif) `#0F88CA` |
| 12 | | ![0044CC](http://dummyimage.com/20x20/0044CC/0044CC.gif) `#0044CC` | ![16308B](http://dummyimage.com/20x20/16308B/16308B.gif) `#16308B` |
| 13 | 3 | ![0000CC](http://dummyimage.com/20x20/0000CC/0000CC.gif) `#0000CC` | ![173BA2](http://dummyimage.com/20x20/173BA2/173BA2.gif) `#173BA2` |
| 14 | | ![4400CC](http://dummyimage.com/20x20/4400CC/4400CC.gif) `#4400CC` | ![5C3F97](http://dummyimage.com/20x20/5C3F97/5C3F97.gif) `#5C3F97` |
| 15 | 8 | ![8800CC](http://dummyimage.com/20x20/8800CC/8800CC.gif) `#8800CC` | ![6823B6](http://dummyimage.com/20x20/6823B6/6823B6.gif) `#6823B6` |
| 16 | 6 | ![CC00CC](http://dummyimage.com/20x20/CC00CC/CC00CC.gif) `#CC00CC` | ![CE359E](http://dummyimage.com/20x20/CE359E/CE359E.gif) `#CE359E` |
| 17 | | ![CC0088](http://dummyimage.com/20x20/CC0088/CC0088.gif) `#CC0088` | ![DC1D49](http://dummyimage.com/20x20/DC1D49/DC1D49.gif) `#DC1D49` |
| 18 | | ![CC0044](http://dummyimage.com/20x20/CC0044/CC0044.gif) `#CC0044` | ![C71136](http://dummyimage.com/20x20/C71136/C71136.gif) `#C71136` |


## Track Colors

Serato DJ Pro displays different colors in the color picker and the actual column (see table below).
Generally, the column value can be calculated by substracting `0x666666` from the stored value. If the result is less than 0, `0x1000000` is also added.
An alternative way to calculate is without using signed numbers: If the stored value is less than `0x666666` then add `0x99999A`, else substract `0x666666`

There are some exceptions though:
- If the stored color is `0x999999`, `0x090909` will be displayed instead of `0x333333` (this means that both `0x999999` and `0x6F6F6F` will result in the same color)
- If the stored color is `0xFFFFFF`, `0x333333` will be displayed instead of `0x999999`
- If the stored color is `0x000000`, `0x333333` will be displayed instead of `0x99999a`

This means that both `0x999999` and `0x999999a` cannot be used in the track color library column.

| # | Color Picker / Stored in Tag | Shown in Library Column
| -- | ------------------------------------------------------------------ | ------------------------------------------------------------------
| 1 | ![FF99FF](http://dummyimage.com/20x20/FF99FF/FF99FF.gif) `#FF99FF` | ![993399](http://dummyimage.com/20x20/993399/993399.gif) `#993399`
| 2 | ![FF99DD](http://dummyimage.com/20x20/FF99DD/FF99DD.gif) `#FF99DD` | ![993377](http://dummyimage.com/20x20/993377/993377.gif) `#993377`
| 3 | ![FF99BB](http://dummyimage.com/20x20/FF99BB/FF99BB.gif) `#FF99BB` | ![993355](http://dummyimage.com/20x20/993355/993355.gif) `#993355`
| 4 | ![FF9999](http://dummyimage.com/20x20/FF9999/FF9999.gif) `#FF9999` | ![993333](http://dummyimage.com/20x20/993333/993333.gif) `#993333`
| 5 | ![FFBB99](http://dummyimage.com/20x20/FFBB99/FFBB99.gif) `#FFBB99` | ![995533](http://dummyimage.com/20x20/995533/995533.gif) `#995533`
| 6 | ![FFDD99](http://dummyimage.com/20x20/FFDD99/FFDD99.gif) `#FFDD99` | ![997733](http://dummyimage.com/20x20/997733/997733.gif) `#997733`
| 7 | ![FFFF99](http://dummyimage.com/20x20/FFFF99/FFFF99.gif) `#FFFF99` | ![999933](http://dummyimage.com/20x20/999933/999933.gif) `#999933`
| 8 | ![DDFF99](http://dummyimage.com/20x20/DDFF99/DDFF99.gif) `#DDFF99` | ![779933](http://dummyimage.com/20x20/779933/779933.gif) `#779933`
| 9 | ![BBFF99](http://dummyimage.com/20x20/BBFF99/BBFF99.gif) `#BBFF99` | ![559933](http://dummyimage.com/20x20/559933/559933.gif) `#559933`
| 10 | ![99FF99](http://dummyimage.com/20x20/99FF99/99FF99.gif) `#99FF99` | ![339933](http://dummyimage.com/20x20/339933/339933.gif) `#339933`
| 11 | ![99FFBB](http://dummyimage.com/20x20/99FFBB/99FFBB.gif) `#99FFBB` | ![339955](http://dummyimage.com/20x20/339955/339955.gif) `#339955`
| 12 | ![99FFDD](http://dummyimage.com/20x20/99FFDD/99FFDD.gif) `#99FFDD` | ![339977](http://dummyimage.com/20x20/339977/339977.gif) `#339977`
| 13 | ![99FFFF](http://dummyimage.com/20x20/99FFFF/99FFFF.gif) `#99FFFF` | ![339999](http://dummyimage.com/20x20/339999/339999.gif) `#339999`
| 14 | ![99DDFF](http://dummyimage.com/20x20/99DDFF/99DDFF.gif) `#99DDFF` | ![337799](http://dummyimage.com/20x20/337799/337799.gif) `#337799`
| 15 | ![99BBFF](http://dummyimage.com/20x20/99BBFF/99BBFF.gif) `#99BBFF` | ![335599](http://dummyimage.com/20x20/335599/335599.gif) `#335599`
| 16 | ![9999FF](http://dummyimage.com/20x20/9999FF/9999FF.gif) `#9999FF` | ![333399](http://dummyimage.com/20x20/333399/333399.gif) `#333399`
| 17 | ![BB99FF](http://dummyimage.com/20x20/BB99FF/BB99FF.gif) `#BB99FF` | ![553399](http://dummyimage.com/20x20/553399/553399.gif) `#553399`
| 18 | ![DD99FF](http://dummyimage.com/20x20/DD99FF/DD99FF.gif) `#DD99FF` | ![773399](http://dummyimage.com/20x20/773399/773399.gif) `#773399`
| 19 | ![FFFFFF](http://dummyimage.com/20x20/FFFFFF/FFFFFF.gif) `#FFFFFF` | ![333333](http://dummyimage.com/20x20/333333/333333.gif) `#333333`
| 20 | ![BBBBBB](http://dummyimage.com/20x20/BBBBBB/BBBBBB.gif) `#BBBBBB` | ![555555](http://dummyimage.com/20x20/555555/555555.gif) `#555555`
| 21 | ![999999](http://dummyimage.com/20x20/999999/999999.gif) `#999999` | ![090909](http://dummyimage.com/20x20/090909/090909.gif) `#090909`
Loading

0 comments on commit 19f97c5

Please sign in to comment.