Lumi

Tabela de cores padrão

December 21, 2016

{% capture squareColor %} #var1{% endcapture %}

Resolvi postar algo que sempre esqueço: a tabela de cores padrão. Essas cores são usadas por todo seu jogo e vem junto com sua windowskin. São aqueles quadradinhos embaixo e à direita da imagem.

Cada um dos quadrados representa uma cor, com o total de 32 cores. Na escala de cores para ser usada no código dos diálogos (exemplo: \c[3]esse texto é verde limão\c[0] e voltou a ser branco), a primeira cor começa em 0 (zero).

{:.table-colors} | # | Cor | Hex | RGB | Nome aprox. | Muitas infos | | :---: | :--- | :---: | :---: | ---: | ---: | | 0 | Branco | {{ squareColor | replace: ‘var1’, ‘ffffff’ }} | 255, 255, 255 | White | White | 1 | Azul | {{ squareColor | replace: ‘var1’, ‘20a0d6’ }} | 32, 160, 214 | Curious Blue | Strong blue | | 2 | Coral | {{ squareColor | replace: ‘var1’, ‘ff784c’ }} | 255, 120, 76 | Coral | Light red | | 3 | Verde limão | {{ squareColor | replace: ‘var1’, ‘66cc40’ }} | 102, 204, 64 | Atlantis | Moderate green | | 4 | Azul bebê | {{ squareColor | replace: ‘var1’, ‘99ccff’ }} | 153, 204, 255 | Anakiwa | Very light blue | | 5 | Lilás | {{ squareColor | replace: ‘var1’, ‘ccc0ff’ }} | 204, 192, 255 | Melrose | Very pale blue | | 6 | Amarelo claro | {{ squareColor | replace: ‘var1’, ‘ffffa0’ }} | 255, 255, 160 | Milan | Pale yellow | | 7 | Cinza | {{ squareColor | replace: ‘var1’, ‘808080’ }} | 128, 128, 128 | Gray | Dark gray | | 8 | Cinza claro | {{ squareColor | replace: ‘var1’, ‘c0c0c0’ }} | 192, 192, 192 | Prata | Light gray | | 9 | Azul forte | {{ squareColor | replace: ‘var1’, ‘2080cc’ }} | 32, 128, 204 | Curious Blue | Strong Blue | | 10 | Escarlate | {{ squareColor | replace: ‘var1’, ‘ff3810’ }} | 255, 56, 16 | Scarlet | Vivid red | | 11 | Verde | {{ squareColor | replace: ‘var1’, ‘00a010’ }} | 0, 160, 16 | Japanese Laurel | Dark lime green | | 12 | Azul brilhante | {{ squareColor | replace: ‘var1’, ‘3e9ade’ }} | 62, 154, 222 | Picton Blue | Bright blue | | 13 | Roxo | {{ squareColor | replace: ‘var1’, ‘a098ff’ }} | 160, 152, 255 | Melrose | Very light blue | | 14 | Amarelo gema | {{ squareColor | replace: ‘var1’, ‘ffcc20’ }} | 255, 204, 32 | Lightning Yellow | Vivid yellow | | 15 | Preto | {{ squareColor | replace: ‘var1’, ‘000000’ }} | 0, 0, 0 | Black | Black | | 16 | Azul | {{ squareColor | replace: ‘var1’, ‘84aaff’ }} | 132, 170, 255 | Malibu | Very light blue | | 17 | Amarelo | {{ squareColor | replace: ‘var1’, ‘ffff40’ }} | 255, 255, 64 | Golden Fizz | Light yellow | | 18 | Vermelho | {{ squareColor | replace: ‘var1’, ‘ff2020’ }} | 255, 32, 32 | Torch Red | Vivid red | | 19 | Azul escuro | {{ squareColor | replace: ‘var1’, ‘202040’ }} | 32, 32, 64 | Mirage | Very dark desaturated blue | | 20 | Laranja | {{ squareColor | replace: ‘var1’, ‘e08040’ }} | 224, 128, 64 | Red Damask | Bright orange | | 21 | Amarelo | {{ squareColor | replace: ‘var1’, ‘f0c040’ }} | 240, 192, 64 | Ronchi | Bright orange | | 22 | Azul | {{ squareColor | replace: ‘var1’, ‘4080c0’ }} | 64, 128, 192 | Steel Blue | Moderate blue | | 23 | Ciano | {{ squareColor | replace: ‘var1’, ‘40c0f0’ }} | 64, 192, 240 | Picton Blue | Bright blue | | 24 | Menta | {{ squareColor | replace: ‘var1’, ‘80ff80’ }} | 64, 192, 240 | Mint Green | Very light lime green | | 25 | Vermelho pálido | {{ squareColor | replace: ‘var1’, ‘c08080’ }} | 192, 128, 128 | Old Rose | Slightly desaturated red | | 26 | Azul pálido | {{ squareColor | replace: ‘var1’, ‘8080ff’ }} | 128, 128, 255 | Malibu | Very light blue | | 27 | Rosa | {{ squareColor | replace: ‘var1’, ‘ff80ff’ }} | 255, 128, 255 | Blush Pink | Very light magenta | | 28 | Verde ciano | {{ squareColor | replace: ‘var1’, ‘00a040’ }} | 0, 160, 64 | Green Haze | Dark cyan - lime green | | 29 | Verde ciano | {{ squareColor | replace: ‘var1’, ‘00e060’ }} | 0, 224, 96 | Malachite | Pure (or mostly pure) cyan - lime green | | 30 | Roxo | {{ squareColor | replace: ‘var1’, ‘a060e0’ }} | 160, 96, 224 | Medium Purple | Soft violet | | 31 | Violeta | {{ squareColor | replace: ‘var1’, ‘c080ff’ }} | 192, 128, 255 | Heliotrope | Very light violet |

Fazendo essa tabela no Jekyll

Infelizmente o markdown quebra se eu usar um include para inserir os quadradinhos na tabela via liquid tag. Então tive que fazer manualmente cada um inline! Entretanto, arrumei um jeito um pouco mais DRY de fazer os quadrinhos. Criei uma variável, a capturei e depois, ao chamá-la, dou um replace apenas na cor.

Minha variável:

{% raw %}
{% capture squareColor %}
  <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="16" height="16" fill="var1"></rect>
  </svg> `var1`
{% endcapture %}
{% endraw %}

E então chamo assim:

{% raw %}
{{ squareColor | replace: 'var1', '#ffffff' }}
{% endraw %}

Eu poderia ter feito isso para os links também. Talvez eu o faça, mas só pensei isso agora, no fim do documento. Fica pra uma próxima? :+1: