GuyForkz Posts - Answer Overflow

GuyForkz

•Created by GuyForkz on 3/19/2025 in #ui-ux

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.

4 replies

Gaming

Programming