Why your brand colour looks different on your phone
Tim Knowles (opens in a new tab)13 min read
Your phone can almost certainly show your brand colour exactly. A hex code is a recipe for one standard colour range, called sRGB, and modern phone screens cover all of it and more. So if your colour looks off on your phone, something is changing it along the way: the phone's own settings, a screen that stretches colour, or the file itself.
Try out a screen that stretches colour
As designed: each hex code exactly as written. The numbers show what stretching would do.
A model of a screen that doesn’t translate colour, not a measurement of any phone. Phone makers don’t publish what their vivid modes do, so read this as the pattern to look for, not the exact amount.
For the curious: how “stretched” is worked out
Each hex code’s red, green and blue numbers are read as Display P3 instead of sRGB, which is what happens when a wide-colour panel shows them with no colour management. “Vivid” is OKLCH chroma: +33% means the stretched colour’s chroma is a third higher. “Easy to spot” means a change of at least 1.5 just-noticeable steps (ΔE OK 0.03), “only just” about one step (0.018 or more), “hard to spot” less than that. Stretched colours outside sRGB are drawn by lowering chroma at the same lightness and hue.
A hex code names one exact colour
When you type in a hex code, you aren't describing "roughly a teal". You're naming one exact colour, written for one agreed colour range called sRGB. The web's colour standard, CSS Color 4 (opens in a new tab), spells it out: a hex code means an sRGB colour. sRGB became an international standard back in 1999, and it's been the web's default ever since. Even an image with no colour label attached gets treated as sRGB.
A hex code is really a recipe, then. This much red, this much green, this much blue, all measured against sRGB. Any screen that follows that recipe properly should show that one colour.
That's good news, because it means your brand colour isn't vague. If two screens show it differently, at least one of them isn't following the recipe as written.
Can your phone actually show your brand colour?
Almost certainly, yes. Most modern phones use a wider colour range called Display P3, and P3 holds every colour in sRGB plus richer greens and reds. The CSS Color 4 spec says modern phone screens can show "all, or nearly all" of P3. I checked colours from right across the hex range against P3's range, and every one of them fits.
In other words, a phone with the bigger range can always follow a recipe written for sRGB. So on a modern phone, "my phone can't show my colour" is almost never the reason it looks different.
Apple created Display P3, borrowing the colour range used for digital cinema. Its first P3 iPhone was the iPhone 7, back in 2016, and current iPhones list "Wide colour (P3)" right there in their specs. As for how much bigger P3 is than sRGB, it's roughly a quarter to a half more, depending on how you measure.
Your laptop, though, may be the odd one out. Plenty of older and budget screens only cover sRGB. That's fine for a hex brand colour, because sRGB is exactly what the hex code asks for. Range only becomes a problem when the colour itself sits outside sRGB, and that usually means a wide-colour file.
A side note: how much bigger P3 is really does depend on how you measure. Apple says P3 is 25% larger than sRGB, but doesn't say how it measured. A flat map of colours gives you about that. Count the light and dark versions too, the way the web standard's own table does, and P3 comes out about 50% bigger. WebKit's blog now gives both figures, and Figma puts it at 49% more distinct colours.
Your phone's settings change colour on purpose
A lot of phones come out of the box set up to catch your eye, which means they change your colour on purpose. Each maker has a calmer setting too, and that's the one you want when you're checking a brand colour.
| Phone | Setting | What it does | The truer option |
|---|---|---|---|
| Google Pixel | Colors: Adaptive | Google says it shows "the most vivid colors". On by default on Pixel 3 and later | Natural, which Google calls the most accurate |
| Samsung Galaxy | Screen mode: Vivid | Samsung calls it "a wide color gamut unique to AMOLED" | Natural, which Samsung says gives the best colour accuracy |
| iPhone (8 and later) | True Tone | On by default. Shifts the screen's colour to match the light in the room | Turn it off in Settings > Display & Brightness |
| iPhone, Pixel | Night Shift, Night Light | Moves the screen towards warm colours, usually on a schedule | Turn it off while you judge colour |
| Any OLED phone | Viewing angle | Slight shifts in colour and hue when you look at an angle. Apple calls this normal | Look at the screen straight on |
Samsung switched its default from Vivid to Natural with the Galaxy Note10 in 2019, but it doesn't say what newer models use. So it's worth checking which mode yours is on, in Settings > Display > Screen mode.
None of these settings are faults. Each one is doing exactly what its maker designed it to do. They just aren't set up for checking a brand colour, so if your colour looks warm or loud on your phone, this is the first place to look.
Dark mode is a separate thing. It changes the app around your colour, and it only touches your brand colour if the app swaps it for another one.
iPhone has no "accurate" mode. Apple's Reference Mode, which switches off True Tone, Night Shift and auto-brightness, only exists on some iPad Pro models. On an iPhone, the closest you'll get is turning those settings off yourself and looking at the screen straight on.
What does "stretching" do to a brand colour?
It makes colours stronger, and some a lot more than others. A screen that translates colour converts the sRGB recipe into its own wider range, so your teal stays your teal. But a screen that doesn't translate sends the recipe's numbers straight to its panel, and on a wide-colour panel those same numbers come out more saturated.
Say the recipe asks for "two spoons of green". A screen that doesn't translate measures it out with its own bigger spoons. Same numbers, stronger result. And the green spoon is the biggest one of all.
According to Android's own developer documents, every version before Android 8 worked this way. Since Android 8, Android can translate colour, but it's up to each phone maker whether to switch that on for the whole phone, and Google tells makers to leave it off unless the screen has been properly measured and supports P3. Apple, on the other hand, builds colour translation into iOS and macOS.
I worked out what happens when sRGB colours are stretched onto a P3 screen with no translation, and the change isn't even:
| Colour | Change in vividness | Visible? |
|---|---|---|
| Teal #00A6A6 | +33% | Yes |
| Green #00B050 | +26% | Yes |
| Orange #FF6B00 | +18% | Yes |
| Red #E4002B | +16% | Yes |
| Blue #0057FF | +6% | Only just |
| Purple #6B2FBF | +6% | Only just |
| Navy #1B2A4A | +9% | Not really: it's dark and muted |
| Mid-grey #808080 | No change | No |
Hue barely moves in any of them, under 4 degrees, so nearly all of the change is in vividness. Blues hardly change because P3 and sRGB share the same blue. Greys don't change at all, because a grey uses equal amounts of everything.
That uneven pattern is a fingerprint. So if your teal or green looks loud on one phone while your navy and greys look fine, suspect stretching or a vivid setting. Phone makers don't publish exactly what their vivid modes do, so read my table as the pattern to look for rather than a description of any one phone.
Could the file be changing your colour?
Yes, if it was made in a wide colour range. New Figma files use sRGB by default, but you can set any file to Display P3, and Figma then exports in the file's own colour range unless you change it at export. Figma's help page (opens in a new tab) even warns that P3 colours "won't display properly" on screens that can't show P3.
That warning matters more than it sounds. By my count, about half of the colour codes you can pick in a P3 file sit outside sRGB. A lot of them are only just outside, but on an sRGB laptop every one of them has to be squeezed in.
When you change a Figma file's colour range, Figma asks you to choose between two options:
- Assign keeps your hex codes, and lets the colours look different.
- Convert keeps the colours looking the same, and changes the codes.
Take a red, #E4002B. Convert it to P3 and Figma stores new numbers (209, 45, 53 instead of 228, 0, 43), and it looks the same. Assign P3 instead and the numbers stay 228, 0, 43 but are now read as P3, so the red comes out about 16% more vivid. That's the same stretch a screen with no translation makes, only this time it's done on purpose, in the file.
Figma actually uses brand colours as its own example for keeping hex codes fixed. So if your brand guide lists hex codes, keeping them fixed is a fair instinct. Just know which range those codes are living in.
For images headed anywhere you don't control, sRGB is the safe default. Images with no colour label are read as sRGB, Adobe recommends sRGB for web images, and social platforms may convert your images anyway.
Squeezing a wide colour onto a smaller screen
Mostly, a wide colour just loses some vividness when a smaller screen has to squeeze it in. There are two broad ways to do the squeezing. The crude one, called clipping, cuts each of red, green and blue off at its limit. The gentler one, which the CSS standard asks for, lowers the colour's vividness while holding its lightness and hue steady. Browsers and apps don't all handle it the same way. For most brand colours, though, the colour was only a little out of range to begin with.
I tested the most vivid P3 colours going to an sRGB screen. Most lost about 10 to 25% of their vividness, whereas P3 blue and a hot pink lost only about 3%. The hue moved less than 5 degrees in every case, whichever method was used. Side by side, you'd see the difference. On its own, a squeezed colour usually just looks a little flatter.
Worth knowing: two reds can become one. Back in 2016, WebKit put together a demo (opens in a new tab) that hid a logo inside a red square. The logo and the square were two slightly different P3 reds. On a P3 screen, you could see the logo. On an sRGB screen, both reds got squeezed to the same full red, and the logo simply vanished. Fine differences between wide colours can disappear completely on a smaller screen.
Try out squeezing a wide colour onto a normal screen
The line: the edge of what a normal screen can show. Everything to its right needs a wide-colour screen.
Cut off: 20% less vivid, hue moved 3°. Squeezed gently: 23% less vivid, hue moved 2°.
For the curious: what the slice is
It’s one OKLCH hue, with lightness running up and chroma (vividness) running right, filled out to the edge of Display P3. The line is the edge of sRGB. “Cut off” clips each of red, green and blue to its limit. “Squeezed gently” lowers chroma at the same lightness and hue until clipping what’s left moves the colour less than a just-noticeable difference (ΔE OK 0.02), the approach CSS Color 4 describes. “Less vivid” is the drop in chroma; “hue moved” is the change in OKLCH hue. Each hue button starts on a Display P3 primary or mix: red (1, 0, 0), orange (1, 0.5, 0), yellow, green, cyan, blue and magenta.
No single screen is the right one
Every phone, laptop and monitor makes its own choices, and you can't control the screens your audience uses. What you can control is the recipe. So keep your brand's hex code fixed, check your own screens fairly, and accept that small differences on other people's phones are normal.
Paper is a different problem with its own limits, and that's covered in Why bright designs go dull in print.
What should you do differently in your next design?
Check the phone before you change the colour. And unless you choose P3 on purpose, keep your master brand colour as an sRGB hex code.
- Do a fair check first. On iPhone, turn off True Tone and Night Shift. On Samsung, set Screen mode to Natural. On Pixel, set Colors to Natural. Then look at the screen straight on.
- Look for the fingerprint. If greens and teals look loud but navy and greys look normal, the screen is boosting colour, and your file is probably fine.
- Compare on a second phone. Use a different brand if you can. If the two still disagree, the difference is in the screens, not in your file.
- Keep one master value. Write your brand colour in your brand guide as an sRGB hex code, and treat that as the truth.
- Know which range your Figma file is in. Check the file's colour profile. Only choose Display P3 when you're designing for wide-colour screens on purpose, and check the export setting before you send files out.
- Choose Assign or Convert deliberately. Assign keeps your codes and changes the look. Convert keeps the look and changes your codes.
- Put your phone back. When you're done, turn your settings back on if you like them.
Try out the grey-square check on your phone
- Turn off the colour settings. iPhone: True Tone and Night Shift off. Samsung: Screen mode to Natural. Pixel: Colors to Natural.
- Set brightness to about the middle, with auto-brightness off for the test.
- Look at the screen straight on, not from an angle.
- Compare with a second phone, of a different brand if you can.
- Put your settings back when you’re done, if you like them.
Showing #00A6A6. If the grey looks warm or cool, a setting is tinting everything on the screen.
Frequently asked questions
Why does my brand colour look different on my phone than on my computer?
Usually because one of the two screens is changing it on purpose. Many phones ship with a vivid colour setting switched on, and Google says a Pixel's default mode shows "the most vivid colors". Samsung's Vivid mode uses a wider colour range than your design was made for, and iPhones adjust colour to the room's light with True Tone. Screens also differ in how wide a range of colour they can show, so no two will match exactly.
Why does the same hex code look different on different screens?
Because not every screen translates it the same way. A hex code is a set of three numbers meant for a standard colour range called sRGB. Screens and apps that manage colour translate those numbers for their own display, so the colour comes out close to what was intended. Others send the numbers straight to the screen, and a screen with a wider range then shows a more saturated colour. The code is the same, but the translation isn't.
Should I design in sRGB or Display P3?
For most brand, web and social work, use sRGB. It's the standard that hex codes and unlabelled images are assumed to use, and Figma sets new files to sRGB by default. Only choose Display P3 when you're designing mainly for wide-colour screens, such as recent iPhones, and you want colours beyond sRGB. Figma itself warns that P3 colours won't display properly on screens that can't show that range.
Why do colours look oversaturated on my Samsung phone?
Most likely it's the screen mode. Samsung phones offer Vivid, which Samsung describes as "a wide color gamut unique to AMOLED", and Natural, which it says gives the best colour accuracy. Go to Settings > Display > Screen mode and choose Natural for truer colour. Samsung made Natural the default from the Galaxy Note10, but settings can be changed and newer models aren't documented, so check which mode yours is on.
Why does my iPhone make colours look warmer than another screen?
Because two settings warm the screen on purpose. True Tone, which is on by default on iPhone 8 and later, adjusts the screen's colour to match the light in the room. Night Shift moves colours towards the warm end of the spectrum, usually in the evening. So before you judge a colour, turn both off in Settings > Display & Brightness and look at the screen straight on.
For the curious
A colour range is called a gamut. sRGB is IEC 61966-2-1:1999. Display P3 uses the DCI-P3 cinema primaries with sRGB's D65 white point and tone curve. Translating between them is colour management. Android added it in version 8.0 (opens in a new tab) (API level 26); before that, the system remapped app colours onto the display's gamut.
How much bigger P3 is depends on the measure. My figures: about 1.26 times sRGB's area on the CIE 1976 u′v′ diagram, 1.36 times on the CIE 1931 xy diagram, and 1.50 times by CIELAB volume. The W3C's table gives 0.82 million Lab units for sRGB and 1.23 million for P3.
Squeezing an out-of-range colour is called gamut mapping. CSS Color 4 §14 now permits three methods, all reducing chroma in OkLCh at constant lightness and hue, and it says clipping can give acceptable results when colours aren't far out. Björn Ottosson's "sRGB gamut clipping" (opens in a new tab) compares the methods. Figma's export settings (opens in a new tab) default to the file's profile.
Sources (18)
- W3C, CSS Color Module Level 4 (opens in a new tab), Candidate Recommendation Draft, 13 September 2026, §2, §3.5, §5.2, §10.2, §10.4 and §14
- Dean Jackson, "Improving Color on the Web" (opens in a new tab), WebKit blog, 1 July 2016
- Apple Developer,
CGColorSpace.displayP3(opens in a new tab) - Apple, "Get Started with Display P3" (opens in a new tab), WWDC17 session 821
- Apple Support, iPhone 7 technical specifications (opens in a new tab) and iPhone 16 tech specs (opens in a new tab)
- Apple Support, "Adjust the brightness and color temperature on your iPhone or iPad" (opens in a new tab), 15 May 2026
- Apple Support, "About the Super Retina display and Super Retina XDR display on your iPhone" (opens in a new tab), 1 June 2026
- Apple Support, "Use Reference Mode on your iPad Pro" (opens in a new tab)
- Google Pixel Help, "Manage screen & display settings on a Pixel phone" (opens in a new tab)
- Samsung Support Singapore, "Samsung Galaxy Note10 screen mode not as vivid" (opens in a new tab), updated 3 August 2022
- Samsung Support Canada, "Manage display settings on your Samsung Galaxy" (opens in a new tab), updated 20 February 2026
- Android Developers, "Enhance graphics with wide color content" (opens in a new tab), updated 30 December 2022
- Android Open Source Project, "Color management" (opens in a new tab), updated 17 June 2026
- Figma Help Center, "Manage color profiles in design files" (opens in a new tab), updated 13 September 2026
- Figma Help Center, "Export formats and settings for static designs" (opens in a new tab), updated 7 September 2026
- Adobe Help, "Color Settings in Photoshop" (opens in a new tab), updated 24 May 2023
- Björn Ottosson, "sRGB gamut clipping" (opens in a new tab), 25 January 2021
- Our own calculations (gamut size three ways, the stretch table, clipped vs mapped P3 colours), reproduced in colour-science 0.4.7 and culori 4, 19 September 2026
Next: Why bright designs go dull in print
Tim Knowles
Websites, marketing strategy and AI training
Tim has worked in marketing since 2000. At Your Marketing Specialist he builds the websites, and colouriser is one of them. He is self-taught, and learns each subject in depth before he advises on it.
Each Article is written from Tim's own research, and every Figure runs on colouriser's own colour maths.
More about Tim (opens in a new tab)