Need help with consistent colours across devices.

Hi guys, I'm having an issue with a specific colour in my palette. Colour Palette

    --white: oklch(87% 0 0);
    --black: oklch(18% 0 0);
    --grey: oklch(75% 0 0);
    --red: oklch(46.23% 0.185099 8.3041);
    --gold: oklch(81.38% 0.1663 89.16);
    --blue-primary: oklch(42.36% 0.1403 255.17);
    --blue-secondary: oklch(52.63% 0.0653 270.19);

    --white: oklch(87% 0 0);
    --black: oklch(18% 0 0);
    --grey: oklch(75% 0 0);
    --red: oklch(46.23% 0.185099 8.3041);
    --gold: oklch(81.38% 0.1663 89.16);
    --blue-primary: oklch(42.36% 0.1403 255.17);
    --blue-secondary: oklch(52.63% 0.0653 270.19);

The Problem The one causing me issues is the RED colour variable which looks a lot more pink than red when testing on my smartphone (Samsung Galaxy S10 lite). The other colours are fine and display fairly consistently across the devices I tested, but this one colour just does not want to play nice with my phone. I understand that I'll likely need to change the colour, but I'd like to keep it as close as possible for theming purposes. Questions - Is there anything I can do to avoid such problems? - Is there a way I can check the compatibility of my colours without having physical devices to test? Context The website is for a university assignment in which I am to author a website around travel and tourism in a destination of my choosing, and I went with Barcelona (hence I'm using Barcelona FC's red as my accent colour). In addition to introductory web authoring, one of the primary focuses for the assignment is usability and accessibility.

3 Replies

Lamer of Sweden•2w ago

Hello! Could be that you are using Vivid Mode on your Samsung? The Vivid mode will produce amongst else boosted reds and has a larger gamut than DCI-P3 and a lot more than sRGB. So that could be why the reds displays different on your specific smartphone compared to the other devices that maybe have similar hardware components, profiles etc. But trying to make colors look the same on any device is challenging to say the least. https://medium.com/design-bootcamp/consistency-in-color-perception-across-devices-813f7888aa70

Medium

Consistency in Color Perception Across Devices

Look at this, the same color on different screens.

Lamer of Sweden•2w ago

Here's the gamut for Samsung Galaxy S10 lite. https://www.displaymate.com/Gamut_47S.html

Lamer of Sweden•2w ago

Perhaps set up a fallback color as well? https://oklch.com/#46.23,0.1851,8.3,100

OKLCH Color Picker & Converter

OKLCH is a new way to encode colors (like hex, RGBA, or HSL)

Gaming

Programming

Need help with consistent colours across devices.

Did you find this page helpful?