RESOURCE Colour Guide 2.0

Discussion in 'ROLEPLAY SKILLBUILDING' started by Holmishire, Oct 17, 2016.

?

Which style do you use?

  1. Midnight

    58.1%
  2. Dusk

    27.4%
  3. Evening

    4.8%
  4. Daylight

    4.8%
  5. Sunrise

    4.8%
  1. It had to happen eventually. After its third major rework, I had thought the Colour Guide to be finished—surely there was nothing left to improve?

    But alas, the coding crashed, the backgrounds changed, and my ambitions soared.

    Here at Iwaku, we have five primary styles: Midnight, Dusk, Evening, Daylight, and Sunrise. Each style has its own background colour, and are split between two standard text colours: white for the first two, black for the other three. When individuals choose to stray from the standard text, however, challenges arise. Tedious as it may be, for the good of the community, one must ensure any colour used provides sufficient contrast to be read painlessly on each of the styles.

    Tedious once, perhaps, but no more.


    • Midnight
      X O X X O O O X
      O O O O O O O O
      O O O O O O O O
      O O O O O O O O
      O O O O O O O O
      Evening
      O O O O O O O O
      O O O O O O O O
      O O X O X O O O
      O X O O O X O O
      X X O O O X X O
      Dusk
      O O X X X X O X
      X O O O O O O O
      O O O O O O O O
      O O O O O O O O
      O O O O O O O O
      Daylight
      O O O O O O O O
      O O O O O O O O
      O O O O O O O O
      O O X O X O O X
      O X X X X O O X
      Sunrise
      O O O O O O O O
      O O O O O O O O
      O O O O O O O O
      O O X O O O O X
      O O X X X O O X
      Aggregate
      X O X X X X O X
      X O O O O O O O
      O O X O X O O O
      O X X O X X O X
      X X X X X X X X


      Though ideally it would be nice if all preset colours in the rich text editor were friendly to all backgrounds, that is not the case. Avoid using any colours x'd out in the aggregate table.

      For reference, the background colours are as follows:
      • Midnight: #000000
      • Dusk: #313131
      • Sunrise: #f6f6f6
      • Evening: #c2c2c2
      • Daylight: #e5e3e3
    • Foreword: For those who remember the old hexcode table, there have been some significant changes in format. Due to the decision to expand the array of analysed colours from the 216 websafe colours to all 4096 three-digit colours, revealing precisely which backgrounds each colour did not provide sufficient contrast for quickly became unsustainable.

      In fact, the data was so large that it exceeded Iwaku's maximum post size, even ignoring failures. (trust me, I tried.)

      As such, you'll just have to trust me. Below are all 1450 that passed my tests, sorted by hue.


      #666 #777 #888 #999 #A99 #988 #877 #766 #977
      #866 #A77 #C88 #966 #B77 #855 #D88 #A66 #C77
      #955 #B66 #D77 #E77 #C66 #A55 #D66 #B55 #C55
      #A44 #D55 #B44 #C44 #D44 #A33 #E44 #B33 #C33
      #D33 #E33 #A22 #F33 #B22 #C22 #D22 #E22 #F22
      #A11 #B11 #C11 #D11 #E11 #F11 #A00 #B00 #C00
      #D00 #E00 #F00 #F10 #F21 #E10 #E21 #D10 #F43
      #E32 #D21 #C10 #D32 #C21 #B10 #E54 #D43 #C32
      #B21 #A10 #D54 #C43 #B32 #A21 #D65 #C54 #B43
      #A32 #F20 #D76 #C65 #B54 #A43 #E20 #E31 #D20
      #D87 #C76 #B65 #A54 #943 #D31 #C20 #D42 #C31
      #B20 #C87 #B76 #A65 #954 #D53 #C42 #B31 #A20
      #F30 #E30 #D64 #C53 #B42 #A31 #E41 #D30 #B87
      #A76 #965 #D75 #C64 #B53 #A42 #931 #D41 #C30
      #F40 #D52 #C41 #B30 #C75 #B64 #A53 #D63 #C52
      #B41 #A30 #D40 #A87 #976 #865 #C86 #B75 #A64
      #953 #D74 #C63 #B52 #A41 #D51 #C40 #D62 #C51
      #B40 #D85 #C74 #B63 #A52 #941 #D50 #B86 #A75
      #964 #D73 #C62 #B51 #A40 #D61 #C50 #C85 #B74
      #A63 #952 #C73 #B62 #A51 #940 #D72 #C61 #B50
      #D60 #987 #876 #B97 #A86 #975 #B85 #A74 #963
      #C84 #B73 #D83 #A62 #C72 #951 #B61 #D71 #840
      #A50 #C60 #D70 #D82 #C71 #B60 #C83 #B72 #A61
      #950 #B84 #A73 #962 #851 #D81 #C70 #B96 #A85
      #974 #863 #C82 #B71 #A60 #D80 #C94 #B83 #A72
      #961 #850 #C81 #B70 #A97 #986 #875 #764 #B95
      #A84 #973 #862 #C93 #B82 #751 #A71 #D91 #960
      #C80 #B81 #A70 #B94 #A83 #972 #861 #750 #C91
      #B80 #A96 #985 #874 #763 #B93 #A82 #971 #860
      #C90 #B92 #A81 #970 #A95 #984 #873 #762 #B91
      #A80 #B90 #A94 #983 #872 #761 #A93 #982 #871
      #760 #A92 #981 #870 #A91 #980 #A90 #998 #776
      #997 #886 #AA7 #664 #996 #885 #AA6 #774 #995
      #884 #994 #773 #AA4 #883 #662 #993 #AA3 #772
      #882 #992 #661 #771 #881 #991 #AA1 #660 #770
      #880 #990 #9A1 #890 #9A2 #891 #780 #9A3 #892
      #781 #670 #9A4 #893 #782 #671 #9A5 #894 #783
      #672 #561 #8A1 #790 #9A6 #895 #784 #673 #8A2
      #791 #680 #8A3 #792 #681 #570 #7A0 #9A7 #785
      #674 #8A4 #793 #682 #571 #7A1 #690 #7A2 #691
      #580 #8A5 #794 #683 #572 #461 #7B1 #6A0 #7A3
      #692 #581 #470 #6A1 #590 #897 #786 #8A6 #795
      #684 #7A4 #693 #582 #6A2 #471 #591 #6B1 #480
      #5A0 #6B2 #5A1 #490 #6A3 #592 #481 #370 #8B6
      #7A5 #694 #583 #472 #5B1 #4A0 #5A2 #491 #380
      #4B0 #8A7 #685 #574 #7B5 #6A4 #593 #482 #5B2
      #371 #4A1 #390 #4B1 #3A0 #5A3 #492 #381 #270
      #7A6 #695 #584 #473 #4A2 #391 #280 #4B2 #3A1
      #290 #7B6 #6A5 #594 #483 #372 #3B1 #2A0 #6B5
      #5A4 #493 #382 #271 #4A3 #392 #281 #170 #4B3
      #3A2 #291 #180 #3B2 #2A1 #190 #2B1 #1A0 #898
      #676 #8A8 #797 #686 #7A7 #696 #585 #6A6 #595
      #6B6 #484 #5A5 #5B5 #494 #373 #4A4 #383 #393
      #3A3 #3B3 #282 #292 #2A2 #2B2 #171 #181 #191
      #1A1 #1B1 #070 #080 #090 #0A0 #0B1 #1B2 #0A1
      #2B3 #1A2 #091 #3B4 #2A3 #192 #081 #3A4 #293
      #182 #071 #4A5 #394 #283 #0B2 #5A6 #495 #384
      #0A2 #2B4 #1A3 #092 #6A7 #596 #485 #2A4 #193
      #082 #3A5 #294 #183 #1B4 #0A3 #7A8 #697 #586
      #5B7 #4A6 #395 #284 #173 #1A4 #093 #0B4 #3B6
      #2A5 #194 #083 #5A7 #496 #385 #0A4 #4B7 #3A6
      #295 #184 #073 #2B6 #1A5 #094 #798 #687 #576
      #6A8 #597 #486 #4A7 #396 #3B7 #285 #2A6 #195
      #084 #0A5 #2B7 #1A6 #095 #3A7 #296 #185 #5A8
      #497 #386 #1B7 #0A6 #2A7 #196 #085 #698 #587
      #476 #4A8 #397 #286 #1A7 #096 #0A7 #3A8 #297
      #186 #6A9 #598 #487 #2A8 #197 #086 #1A8 #097
      #5A9 #498 #387 #0A8 #4A9 #398 #287 #3A9 #298
      #187 #2A9 #198 #087 #1A9 #098 #0A9 #899 #788
      #677 #8AA #799 #688 #577 #7AA #699 #588 #6AA
      #477 #599 #488 #5AA #499 #377 #4AA #388 #399
      #3AA #277 #288 #299 #2AA #177 #188 #199 #1AA
      #077 #088 #099 #0AA #0AB #1AB #09A #2AB #19A
      #3AB #29A #078 #4AB #39A #289 #178 #067 #5AB
      #49A #389 #278 #0AC #1AC #09B #6AB #59A #489
      #378 #2AC #19B #08A #3AC #29B #18A #0AD #69A
      #589 #478 #4AC #39B #28A #1AD #09C #2AD #19C
      #08B #49B #38A #0AE #3AD #29C #18B #07A #1AE
      #09D #79A #689 #578 #59B #48A #379 #4AD #39C
      #28B #2AE #17A #19D #08C #0AF #1AF #09E #3AE
      #29D #18C #07B #5AD #49C #38B #27A #2AF #19E
      #08D #69B #58A #479 #4AE #39D #28C #17B #09F
      #3AF #29E #18D #07C #6AD #59C #48B #37A #19F
      #08E #49D #38C #27B #4AF #39E #28D #17C #29F
      #18E #07D #08F #89A #789 #678 #79B #68A #579
      #69C #58B #47A #59D #48C #49E #37B #38D #39F
      #27C #28E #17D #18F #07E #07F #28F #17E #49F
      #38E #27D #59E #48D #37C #69D #58C #47B #17F
      #06E #38F #27E #79C #68B #57A #59F #48E #37D
      #06F #27F #16E #69E #58D #47C #36B #48F #37E
      #16F #89B #78A #679 #79D #68C #57B #69F #58E
      #47D #37F #26E #26F #58F #47E #79E #68D #57C
      #46B #47F #36E #89C #78B #67A #68E #57D #36F
      #68F #57E #46D #78C #67B #56A #57F #46E #46F
      #89E #78D #67C #56B #78E #67D #56C #78F #67E
      #56D #67F #56E #56F #99A #889 #778 #667 #88A
      #779 #668 #88B #77A #88C #669 #77B #88D #66A
      #77C #88E #66B #77D #88F #77E #66C #77F #66D
      #66E #66F #76F #87F #76E #87E #76D #98E #87D
      #76C #98D #87C #76B #75F #86F #98C #87B #76A
      #97F #86E #97E #86D #75C #85F #98B #87A #769
      #97D #86C #75B #96F #85E #74D #A7F #96E #85D
      #A8D #97C #86B #95F #A7E #96D #85C #A6F #95E
      #84D #94F #83E #98A #879 #768 #A8C #97B #86A
      #A7D #96C #B7F #85B #A6E #95D #A5F #94E #93F
      #92F #A4F #93E #B6F #A5E #94D #B7E #A6D #95C
      #91F #A3F #92E #A7C #96B #B5F #A4E #93D #90F
      #A2F #91E #B6E #A5D #94C #B4F #A3E #92D #A1F
      #A8B #97A #869 #B7D #A6C #95B #C6F #B5E #A4D
      #93C #B3F #A2E #A0F #B2F #A1E #C5F #B4E #A3D
      #B6D #A5C #94B #B1F #A0E #C4F #B3E #A2D #91C
      #B0F #B8C #A7B #96A #C6E #B5D #A4C #C3F #B2E
      #A1D #C2F #B1E #A0D #C5E #B4D #A3C #C1F #B0E
      #B7C #A6B #95A #D5F #C4E #B3D #A2C #C0F #D4F
      #C3E #B2D #A1C #B6C #A5B #94A #D3F #C2E #B1D
      #D2F #C1E #B0D #C6D #B5C #A4B #93A #D1F #C0E
      #D0F #C5D #B4C #A3B #C4D #B3C #D4E #C3D #B2C
      #D3E #C2D #B1C #E3F #D2E #C1D #B0C #E2F #D1E
      #C0D #E1F #D0E #E0F #A9A #989 #878 #767 #A8A
      #979 #868 #B8B #A7A #969 #B7B #858 #A6A #C7C
      #959 #B6B #848 #C6C #A5A #D6D #B5B #949 #C5C
      #A4A #D5D #B4B #C4C #D4D #A3A #E4E #B3B #C3C
      #D3D #E3E #A2A #F3F #B2B #C2C #D2D #E2E #F2F
      #A1A #B1B #C1C #D1D #E1E #F1F #A0A #B0B #C0C
      #D0D #E0E #F0F #F0E #F1E #E0D #F2E #E1D #D0C
      #E2D #D1C #C0B #E3D #D2C #C1B #B0A #D3C #C2B
      #B1A #A09 #F6E #D4C #C3B #B2A #A19 #D5C #C4B
      #B3A #A29 #F0D #D6C #C5B #B4A #A39 #F1D #E0C
      #F2D #E1C #D0B #D7C #C6B #B5A #A49 #938 #E2C
      #D1B #C0A #E3C #D2B #C1A #B09 #C7B #B6A #A59
      #948 #D3B #C2A #B19 #A08 #F0C #F1C #E0B #D4B
      #C3A #B29 #F2C #E1B #D0A #C8B #B7A #A69 #958
      #D5B #C4A #B39 #A28 #E2B #D1A #C09 #F0B #E3B
      #D2A #C19 #B08 #D6B #C5A #B49 #A38 #F1B #E0A
      #D3A #C29 #B18 #A07 #F2B #E1A #D09 #B8A #A79
      #968 #857 #D7B #C6A #B59 #A48 #D4A #C39 #B28
      #E2A #A17 #D19 #C08 #F0A #F1A #E09 #E3A #D29
      #C18 #B07 #D5A #C49 #B38 #A27 #F2A #E19 #D08
      #C7A #B69 #A58 #947 #E4A #D39 #C28 #B17 #F09
      #F3A #E29 #D18 #C07 #D6A #C59 #B48 #F19 #E08
      #D49 #C38 #B27 #A16 #E39 #D28 #C17 #B06 #F29
      #E18 #D07 #F08 #A89 #978 #867 #756 #C8A #B79
      #A68 #957 #D7A #846 #C69 #B58 #A47 #D59 #C48
      #E49 #B37 #D38 #A26 #C27 #E28 #B16 #D17 #F18
      #C06 #E07 #F07 #F28 #E17 #D06 #E38 #D27 #C16
      #B05 #E59 #D48 #C37 #B26 #A15 #D69 #C58 #B47
      #A36 #F17 #E06 #E27 #D16 #C05 #C79 #B68 #A57
      #946 #D37 #C26 #B15 #F06 #F27 #E16 #D05 #D58
      #C47 #B36 #A25 #E37 #D26 #C15 #B04 #F16 #E05
      #B89 #A78 #967 #856 #D79 #C68 #B57 #A46 #F69
      #935 #D47 #C36 #B25 #E26 #D15 #C04 #F05 #F26
      #E15 #D04 #D36 #C25 #B14 #E79 #D68 #C57 #B46
      #A35 #F15 #E04 #E36 #D25 #C14 #B03 #F04 #C89
      #B78 #A67 #956 #D57 #C46 #B35 #E25 #D14 #C03
      #F25 #E14 #D03 #F68 #D46 #C35 #B24 #F14 #E03
      #C78 #B67 #A56 #945 #D35 #C24 #B13 #F03 #E35
      #D24 #C13 #B02 #D78 #C67 #B56 #A45 #E24 #D13
      #C02 #F24 #E13 #D02 #E78 #D67 #C56 #B45 #A34
      #F13 #E02 #F02 #E67 #D56 #C45 #B34 #F67 #D45
      #C34 #B23 #A12 #D34 #C23 #B12 #E34 #D23 #C12
      #B01 #E23 #D12 #C01 #F23 #E12 #D01 #F12 #E01
      #F01


      • v1
        • v1.0: Launch version with standard presets.
        • v1.1: Added hexcodes for standard presets.
        • v1.2: Replaced preset hexcodes with the 216 web-safe colours.
          • v1.2a: created back-up archive.
            • (Lucky I did, because site changes crashed coding.)
      • v2
        • v2.0: Launch version with standard presets, 1402 valid hexcodes, and a changelog.
        • v2.1: Replaced deprecated [xtable] coding with .
          • v2.1.1: Reorganized bulk table due to non-hue sorting.




    Disclaimer: There is an international governing body for accessibility on the internet, that provides guidelines on the amount of contrast both in hue and brightness needed for text to be approved. I created a spreadsheet that ran each of their tests, and not one of the colours passed on all five backgrounds.

    I expected this, and as such went through the trouble of individually evaluating each colour (with @HerziQuerzi's help) against all backgrounds. I used two screens, and I tried to be strict, but not everyone's eyesight is as perfect as mine. This guide will not help if you are roleplaying with anyone who is colour-blind—or just plain blind, for that matter.

    Still, it should work well enough for the majority of users.


    I hope this proves useful.

    Please stop killing my eyes.
     
    #1 Holmishire, Oct 17, 2016
    Last edited: May 21, 2017
    • Love x 13
    • Useful x 11
    • Thank x 8
    • Like x 3
    • Bucket of Rainbows x 1
  2. Fuck yeah, we're back.
     
  3. Thanks, this is a very useful reference sheet that removes guesswork from using text colors.
     
  4. Experiencing technical difficulties.

    I'm currently in the middle of a move, so I won't be able to look into workarounds until probably the weekend. (And who knows how long it'll take to recode.)

    For now, this backup should be handy.
    i'm a cautious fellow
     
  5. What would help to "recode" is changing the { } to [ ] , and you can do that in two-three steps with Notepad ++ and Sublime Text :D
     
  6. ew

    I still have the original spreadsheet, so recoding it would just involve changing a formula or two and re-dragging. I do believe there was a reason I used xtables—likely one of background colours, cell sizes, or variable columns per row, but I cannae remember which. I'll certainly try out standard tables to determine their usability this weekend. (On tablet for now while I try to pack my house properly.)

    Thanks. ;)
     
    • Like Like x 1
  7. It's been two weeks already?! I'm starting to think I should invest in a to-do list.

    Anyways, it's all updated up! There were a few annoying differences between [xtable]s and [table]s I had to sort through, but ultimately nothing that I couldn't fix and/or work around.
     
    #7 Holmishire, May 21, 2017
    Last edited: May 21, 2017
    • Love Love x 2