Choosing a colour palette that still works at 40 pixels

Four colours is enough for a server identity, and more than four is usually a sign the decision has not been made. The four that matter are an accent, a secondary, a sky and a horizon, and each is doing a different job. Getting them right is less about taste than about a short list of places where a colour that looked fine at full size stops working.

What each of the four does

• The accent is the identity colour. It is the one people would name if you asked them what colour your server is. It goes on the ribbon, the invite, the lettering highlight and the active state in any interface you build.
• The secondary is the accent's darker partner. It sits under the accent in gradients, carries the lettering shadow and gives the accent somewhere to sit. It is almost never seen on its own.
• The sky is the darkest value in the scene and the one that sets the overall mood. It is the colour your artwork reads as from across the room.
• The horizon is the brightest value, the light source. It is where the eye lands first and it is what makes a scene read as dusk, as dawn or as midday.

Those four span the whole tonal range of a composition, from the darkest corner to the brightest band. That is why four is enough: anything else in the scene is a mix of two of them.

Start with the accent, and start with the smallest use

The temptation is to pick the accent by looking at a large swatch. The problem is that the accent's hardest job is at 40 pixels, inside a circle, against Discord's sidebar. A colour that is gorgeous on a 1920x320 banner can be invisible in a server rail.

Discord's dark theme sits in a narrow band of desaturated dark grey, somewhere around a 12% to 20% lightness neutral. Any accent whose perceived lightness is close to that, and which is not strongly saturated, visually merges with it. The casualties are predictable: mid slate blues, muted olives, dark teals and anything described as 'muted' or 'dusty'. They are lovely colours and they disappear in a sidebar.

The test takes thirty seconds. Put the accent as a filled circle on a flat #2b2d31 background at 40 pixels and look at it from a metre away. If you have to look for it, pick again, or push its saturation and lightness until you do not.

The contrast you actually have to hit

If your accent is going to carry text anywhere, it has a contrast requirement, and it is a number rather than an opinion. Body text needs a contrast ratio of at least 4.5 to 1 against its background; large text, meaning roughly 24 pixels and up or 19 pixels bold, needs 3 to 1.

This bites in two specific places on a server identity. First, an accent-coloured invite line on a dark banner: a saturated mid-tone accent on a near-black backdrop often lands around 3.5 to 1, which is fine for the large wordmark and not fine for a small invite. Second, white text on an accent-coloured button on your website, where a bright accent frequently fails and a dark accent passes.

The practical move is to pick the accent for the dark case and then derive a lighter tint of it for text. Same hue, same saturation, lightness raised until the ratio clears 4.5. You now have a colour that is unmistakably the same identity and legible at small sizes, which a single accent cannot be at both ends.

Choosing the secondary

The secondary exists to give the accent depth, so the rule is simple: same family, clearly darker, slightly shifted in hue. Taking the accent and only reducing its lightness gives a gradient that looks like a lighting effect rather than a colour choice. Rotating the hue fifteen to thirty degrees as you darken is what makes it look deliberate.

Which direction to rotate is worth thinking about once. Rotating towards the warm side as you darken reads as sunset and as something physical. Rotating towards the cool side reads as night and as something synthetic. Neither is better; they are different servers.

What does not work is a secondary from a different family entirely. An orange accent with a blue secondary is a complementary pair, which is a real design idea, but in a gradient the midpoint goes muddy brown and every soft edge in the composition passes through it. If you want two opposed hues, put them in separate elements, not in the same gradient.

Sky and horizon set the hour

The sky and horizon are not branding colours, they are lighting. Together they decide what time of day the scene is, and that reads faster than any other property of the image.

The one to be careful with is the mid grey and off white pair. It is the most natural-looking combination and it is also the one with the least tonal range, which means the lettering has nowhere bright to sit and nowhere dark to cast into. Flat light is the hardest light to put type on.

The reliable choice for a server identity is a dark, slightly cool sky with a warm horizon. The tonal range is wide, so the wordmark has a bright band to sit against and a dark corner to shadow into, and the warm-against-cool contrast does most of the visual work without any saturated accent being involved.

Checking the palette where it will actually be seen

Before committing, look at the palette in the five places that break palettes. Each of these catches something the others do not.

1. At 40 pixels in a circle on #2b2d31. The Discord avatar and server icon test. Does the mark still exist?
2. At 1865x108. The FiveM detail strip. At that height the backdrop is almost all horizon band; does the accent still separate from it?
3. In greyscale. If the accent and the secondary become the same grey, the gradient is doing nothing and the composition will look flat in any context that desaturates it.
4. On a white background. Your store page, an embed preview, a light-theme Discord client. A palette tuned for near-black often has no dark value at all, and the logo vanishes.
5. Next to the game. GTA's own palette is desaturated greens, concrete greys and warm browns. An accent that fights it looks out of place as a watermark over gameplay.

The greyscale check is the most informative and the one almost nobody does. Convert the four swatches to grey and look at the values. If they are four clearly different values, the palette will work in any context. If two collapse together, you have three colours, not four, and the composition will depend entirely on hue, which is the thing that disappears first in compression, in thumbnails and for the roughly one in twelve men with a colour vision deficiency.

Palettes that work for roleplay servers

Some combinations are common because they genuinely work, not because everybody copies each other. Four that survive all five checks:

• Cyan accent, deep blue secondary, near-black blue sky, pale gold horizon. Cold and technical. The cyan separates from Discord's grey easily and the gold horizon gives the lettering somewhere bright to sit.
• Hot pink accent, violet secondary, dark plum sky, warm coral horizon. Synthetic and nocturnal. The most visible of the four at small sizes, and the one that looks least like anything in GTA, which can cut either way.
• Amber accent, deep rust secondary, dark brown sky, pale sand horizon. Warm and grounded. Sits comfortably next to the game's own colour, which makes it the best choice for a watermark.
• Toxic green accent, forest secondary, near-black green sky, pale lime horizon. Loud, unmistakable in a server list, and difficult to use well because green at high saturation has very high luminance and will overpower everything else in the frame.

What all four have in common: a clearly dark sky, a clearly light horizon, an accent that is more saturated than either, and a secondary in the accent's own family. That structure is the actual advice. The specific hues are interchangeable.

Committing

Write the four hex values down somewhere you will find them again, and then use exactly those values everywhere: the banners, the Discord role colour, the website accent, the store theme, the loading screen. The temptation to nudge a colour slightly per surface is strong and it is the single easiest way to end up with an identity that feels slightly wrong without anybody being able to say why.

Four hex values, one wordmark, one tagline. That is a server identity. Everything else is the artwork, and the artwork is interchangeable in a way the four values are not.