1import"../chunks/CWj6FrbW.js";import"../chunks/C6pZgBk-.js";import{f as w,a as r,s as a,c as P,n as t,e as n}from"../chunks/CLwSbOHY.js";import"../chunks/BIMUs4JE.js";import{H as b,a as R}from"../chunks/DX-edJFV.js";import{H as l}from"../chunks/DMoAOYxz.js";import{I as H}from"../chunks/BjeNCIAq.js";import{C as I}from"../chunks/CVXCg_aa.js";import{P as i}from"../chunks/GzEbCWNx.js";import"../chunks/ChHofsK2.js";import{B as D}from"../chunks/QMCW6tAg.js";const k="/_app/immutable/assets/gamut.CsDYzgfc.png";var C=P("Gamut and wide-color displays: <!>sRGB vs Display P3",1),S=P("<!> <br/> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!> <!>",1);function K(x){var d=S(),c=w(d);b(c,{children:(o,s)=>{t();var e=C(),G=a(w(e));D(G,{moreThan:"500"}),t(),r(o,e)}});var h=a(c,4);R(h,{children:(o,s)=>{t();var e=n("Your monitor cannot show every color that your eye can see. However, newer monitors can show more than older ones.");r(o,e)}});var m=a(h,2);i(m,{children:(o,s)=>{t();var e=n('In digital design, a "gamut" is the range of colors a monitor can reproduce. Every screen and printer covers a smaller region than human vision. When a color falls outside that region, the color gets "clipped" to what the monitor can display.');r(o,e)},$$slots:{default:!0}});var p=a(m,2);i(p,{children:(o,s)=>{t();var e=n("In the picture below, you can see two color gamuts that you can expect to come across, sRGB, which is what monitors have used for ages, and the newer Display P3 gamuts, which can produce a larger variety of greens and reds.");r(o,e)},$$slots:{default:!0}});var u=a(p,2);H(u,{get image(){return k},width:"300px",alt:"CIE chromaticity diagram showing the sRGB and Display P3 gamuts within the larger range of human-visible colors."});var v=a(u,2);l(v,{children:(o,s)=>{t();var e=n("sRGB: the safe default");r(o,e)}});var g=a(v,2);i(g,{children:(o,s)=>{t();var e=n("sRGB has been the standard gamut since the 90s. By default, HEX codes, CSS color names, and RGB values all describe sRGB colors. That makes sRGB dependable: the same color should look reasonably consistent on any decent screen made in the last two decades.");r(o,e)},$$slots:{default:!0}});var f=a(g,2);l(f,{children:(o,s)=>{t();var e=n("Display P3: 25% more color");r(o,e)}});var $=a(f,2);i($,{children:(o,s)=>{t();var e=n("Display P3 provides ~25% more colors than sRGB, with much of that in the direction of red and green. It's become standard across all Apple devices, as well as many flagship smartphones, and higher-end monitors. It's especially valuable in situations where photography and videos are important.");r(o,e)},$$slots:{default:!0}});var _=a($,2);l(_,{children:(o,s)=>{t();var e=n("Should you design in sRGB or P3?");r(o,e)}});var y=a(_,2);i(y,{children:(o,s)=>{t();var e=n("Start in sRGB unless you know your audience uses wide-gamut screens (for example, an iPhone-exclusive app). You can layer P3 colors on top of sRGB, when impactful, such as for hero text, a brand accent, or photos. The sRGB color remains the fallback, so the design still works on screens that cannot show P3.");r(o,e)},$$slots:{default:!0}});var B=a(y,2);I(B),r(x,d)}export{K as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.