# Rosa gradienter som känns moderna, inte sockersöta [Canonical HTML page](https://gradiently.design/sv/guide/pink-gradient) Rosa kan se ut som en godisbutik eller ett modemagasin. Skillnaden ligger sällan i själva rosan utan i vad du sätter bredvid den. Här är paletter, kombinationer och koder för rosa som känns aktuellt. ## The short version - En rosa gradient blandar nyanser av rosa, från blek puderrosa och dammig ros till korall och skarp rosa, ofta med en närliggande persika, röd eller violett. - Rosa ser sockersött ut när det är blekt, mättat och bara paras med andra pasteller, och modernt när det paras med en djup ton. - Djupa partners som oxblod, marinblått, skogsgrönt och nästan svart ger rosan kontrast och gör den redaktionell. - Vit text fungerar på djupa rosa toner som #be185d, men når inte upp till kontrastkravet för brödtext på klarare rosa som #ec4899. - Dammiga, lätt gråtonade rosa toner känns vuxnare än rena godisrosa och passar mode-, skönhets- och kulturvarumärken. En **rosa gradient** blandar nyanser av rosa, från blek puderrosa och dammig ros via korall till skarp rosa och hallon, ofta med en närliggande persika, röd eller violett. Rosa har ett långt uppsving inom mode, skönhet, mat och kultur, men har ett välkänt fel: för blekt, för sött, för sockrigt. Lösningen är nästan alltid kontrast. Para rosa med något djupt så blir det skarpt och redaktionellt. Nedan finns paletter, kombinationer och CSS-koder för rosa gradienter som känns moderna. ## Rosans spännvidd Rosa är ett ljusare rött, men familjen är stor. Puderrosa och dammig ros är mjuka och lätt gråtonade, vilket får dem att kännas lugna och vuxna. Korall och lax drar åt orange och känns varma och soliga. Skarp rosa och fuchsia drar åt violett och känns högljudda och lekfulla. Hallon och bär är djupa nog att bära vit text. - Puderrosa: #fbe4e4 - Dammig ros: #e8b4b8 - Lax: #f9a28b - Korallrosa: #fb7185 - Skarp rosa: #ec4899 - Fuchsia: #c026d3 - Hallon: #be185d - Bär: #831843 Åtta rosa toner från blekast till djupast. Mjuka och gråtonade till vänster, högljudda i mitten, djupa till höger. Vilken rosa du väljer sätter tonen före allt annat: - **Skönhet och hudvård:** puderrosa och dammig ros, ofta med grädde och ett varmt brunt. - **Mode och förlag:** dammig eller skarp rosa mot svart, marinblått eller oxblod. - **Mat och dryck:** korall, lax och hallon, frukternas och sorbetens färger. - **Musik och nattliv:** skarp rosa och fuchsia som glöder mot nästan svart. - **Bröllop och brevpapper:** puderrosa och ros på varmt papper, med detaljer i djupt grönt eller vinrött. Bleka rosa toner överlappar med den bredare pastellfamiljen; [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) går igenom hur du håller dem friska över flera nyanser. ## Därför blir rosa sockersött ### Sockersött - Blekrosa blandat med babyblått eller lila - Varje färg en pastell, inget mörkt - Ren, klar godisrosa utan grått i - Rundad, bubblig text i samma rosa ### Modernt - Rosa satt mot en djup ton - Ett starkt mörkt för text och tyngd - Dammiga, lätt dämpade rosa toner - Skarp text i nästan svart eller grädde Inget av de sockersöta valen är fel i sig; barnvarumärken och konfektyr använder dem med flit. Men om du vill att rosa ska läsas som tryggt snarare än gulligt behöver du tyngd någonstans i designen, och en djup partnerfärg är det snabbaste sättet att få den. ## Mjuka rosa gradienter Mjuka rosa toner känns lugna, varma och taktila. De passar hudvård, brevpapper, bröllop och välmående. Håll dem lite dammiga snarare än klara och använd mörkt bläck för texten. - Puderpapper: `linear-gradient(135deg, #fdf2f0 0%, #f6cfd2 100%)` - Dammig ros: `linear-gradient(160deg, #f5e1dc 0%, #e8b4b8 55%, #c98b95 100%)` - Ros till aprikos: `linear-gradient(135deg, #fde2e4 0%, #fed7aa 100%)` - Kronbladsglöd: `radial-gradient(circle at 30% 30%, #fff1f2 0%, #fbcfe8 45%, #e9a6c0 100%)` Mjuka rosa gradienter. Aprikos och dämpad ros håller dem varma utan socker. ## Rosa med djupa toner Här blir rosa redaktionellt. En djup partner ger rosan något att glöda mot och ger texten en stabil plats att sitta på. Kombinationerna nedan är vanliga inom mode, förlag och hotell- och restaurangbranschen av goda skäl. - Oxblod till ros: `linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%)` - Marinblått till rosa: `linear-gradient(160deg, #0f1a33 0%, #3a2a5c 50%, #f9a8c2 100%)` - Skog och rosa, delat: `linear-gradient(90deg, #14352a 0% 50%, #f7b6c2 50% 100%)` - Kakao till ros: `linear-gradient(160deg, #1c1210 0%, #4a2c25 50%, #e9a8a0 100%)` - Rosa ljus på svart: `radial-gradient(circle at 70% 80%, #ff7ab8 0%, #7a1f4b 40%, #0d0508 80%)` - Plommon till hallon: `linear-gradient(135deg, #3b0764 0%, #9d174d 55%, #fda4af 100%)` Rosa med djupa partners. Skogskombinationen använder en hård delning eftersom rosa och grönt är nästan motsatser och skulle blandas till grått. Grönt och rosa ligger nästan mitt emot varandra på färghjulet, så de är ett slående par men en dålig blandning. Håll dem i separata ytor, som i delningen ovan. [Komplementfärger](https://gradiently.design/sv/guide/complementary-colors) förklarar varför motsatser blir grå när de blandas. ## Djärva gradienter i skarp rosa Skarp rosa är de högljuddaste färgerna i familjen. De passar musik, nattliv, reamoment och varumärken som vill synas från andra sidan rummet. Blanda dem mot orange eller violett, aldrig mot grönt eller turkos. - Rosa till mandarin: `linear-gradient(135deg, #db2777 0%, #f97316 100%)` - Hallonstigning: `linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f9a8d4 100%)` - Violett till rosa: `linear-gradient(135deg, #7c3aed 0%, #ec4899 100%)` - Rosa solnedgång: `linear-gradient(180deg, #ff4d8d 0%, #ff8a5c 60%, #ffd29d 100%)` Livfulla rosa gradienter. Var och en blandas mot en varm eller violett granne, så att mitten förblir klar. Violett till rosa är en av de mest välbekanta gradienterna på nätet. Använder du den, gör den till din med en djup botten, en varm högdager eller korn. Guiden om [lila gradienter](https://gradiently.design/sv/guide/purple-gradient) har mer om det. ## Rosa i redaktionell design Ett stående redaktionellt omslag med titeln Mjukhetsnumret på en rosatonad gradient Rosa som magasinomslag: lugn yta, tryggt typsnitt. Ett kvadratiskt citatinlägg med mörk text på en mjuk gradient Ett citatinlägg där mörk text ger rosan tyngd. Redaktionell rosa fungerar eftersom den behandlar färgen som en botten och inte som en dekoration. En enda stor yta, generöst med luft, skarp serif eller grotesk i nästan svart eller grädde och en detalj i en djup partnerfärg. [Redaktionell design för sociala medier](https://gradiently.design/sv/guide/editorial-design-for-social) går igenom knepen i detalj. ## Text på rosa gradienter | Text på bakgrund | Kontrast | Omdöme | | --- | --- | --- | | Vitt på `#831843` | 9,7:1 | Utmärkt | | Vitt på `#be185d` | 6,0:1 | Bra för brödtext | | Vitt på `#db2777` | 4,6:1 | Klarar precis brödtext | | Vitt på `#ec4899` | 3,5:1 | Bara stor text | | `#3b0a1e` på `#f472b6` | 6,4:1 | Mörkt bläck fungerar här | | `#1f2a44` på `#f9c6d0` | 9,5:1 | Marinblått på rosa: utmärkt | Kontrastförhållanden enligt WCAG, beräknade. Brödtext kräver 4,5:1, stor text 3:1. ```css .cover { background-color: #2a0a12; background-image: linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%); color: #fdf2f0; } ``` Oxblod till ros, med grädde som textfärg. Sätt orden i fältets övre, mörkare del. På en gradient ska du alltid kontrollera kontrasten där rosan är som ljusast bakom texten. [Text på gradient](https://gradiently.design/sv/guide/text-on-gradient) visar hur du hittar den lugna zonen. ## FAQ ### Vilka färger passar med rosa i en gradient? Persika, korall, rött och violett blandas rent med rosa. För kontrast, para rosa med djupa toner som oxblod, marinblått, kakao eller nästan svart. Håll grönt i en separat yta, eftersom rosa och grönt blandas till grått. ### Hur får jag rosa att se mindre barnsligt ut? Använd dammiga eller djupa rosa toner i stället för klar godisrosa, lägg till en djup partnerfärg och sätt texten i nästan svart eller grädde i stället för i en annan rosa. ### Vilken textfärg fungerar på en rosa gradient? Vitt fungerar på djupa rosa toner som hallon och bär. På ljusare rosa, använd ett mörkt bläck som ett djupt vinrött eller marinblått. ### Vilken CSS ger en rosa gradient? Till exempel ger linear-gradient(160deg, #2a0a12 0%, #6b1d2a 50%, #f4a6b8 100%) en gradient från oxblod till ros. Alla paletter på den här sidan går att kopiera som CSS.