Firefox ๋ธŒ๋ผ์šฐ์ € ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ
  • ํ™•์žฅ ๊ธฐ๋Šฅ
  • ํ…Œ๋งˆ
    • Firefox์šฉ
    • ์‚ฌ์ „ ๋ฐ ์–ธ์–ด ํŒฉ
    • ๋‹ค๋ฅธ ๋ธŒ๋ผ์šฐ์ € ์‚ฌ์ดํŠธ
    • Android ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ
๋กœ๊ทธ์ธ
Chromafy ๋ฏธ๋ฆฌ๋ณด๊ธฐ

Chromafy ์ œ์ž‘์ž: Prajwal

Apply generated color palettes to any website using specific class names or CSS variables. Use your own or any other website as a playground to see which color combination looks the best.

0 (0 reviews)0 (0 reviews)
์‚ฌ์šฉ์ž 2๋ช…์‚ฌ์šฉ์ž 2๋ช…
์ด ํ™•์žฅ ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•˜๋ ค๋ฉด Firefox๊ฐ€ ํ•„์š”ํ•จ
Firefox๋ฅผ ๋‹ค์šด๋กœ๋“œํ•˜๊ณ  ํ™•์žฅ ๊ธฐ๋Šฅ์„ ๋ฐ›์œผ์„ธ์š”
ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ

ํ™•์žฅ ๋ฉ”ํƒ€ ๋ฐ์ดํ„ฐ

์Šคํฌ๋ฆฐ์ƒท
example code showing various class names and the corresponding resultsapplying colors to an element by adding class names through inspect element dev tools - 1applying colors to an element by adding class names through inspect element dev tools - 2after finalizing a color palette, you can export css code in order to use in your websitecolor picker component to manually customize any color from the palette
์ •๋ณด
Chromafy helps users apply color palettes to any website. User can generate different color palettes, customize them, export them as css code or download as a file, and go to previously selected palettes. These palettes are then applied to the website in the background when the extension is launched. The user has to give certain class names to html elements or use css variables and the appropriate colors will be given to those elements.

Example showing use of class names to apply color palettes:
class = "bg-chroma-secondary-25"
Applies the secondary color from your palette with 25% opacity to the background (CSS background-color property) of an element.

class = "fg-chroma-primary"
Applies the primary color from your palette to the foreground text (CSS color property) of an element.

CSS variables can be used similarly, it does not require specifiying "bg" or "fg":
<css-selector>{
background-color: var(--chroma-primary-75, #fff);
}

refer to the documentation here to understand everything related to Chromafy: https://chromafy.vercel.app/docs/setup

Say goodbye to the hassle of trying out different colors one by one. Browse through, generate and customize color palettes while applying them to any website simultaneously, all with just a few tweaks in the code. It can be helpful for users who want to select the best colors for their website on their own website as a playground.


Updates:
โ€ข Version 1.1
- rearranged buttons, updated icons
- added information card
0๋ช…์˜ ๋ฆฌ๋ทฐ์–ด๊ฐ€ 0๋กœ ํ‰๊ฐ€ํ•จ
๋กœ๊ทธ์ธํ•˜์—ฌ ์ด ํ™•์žฅ ๊ธฐ๋Šฅ์˜ ํ‰์ ์„ ๋‚จ๊ฒจ์ฃผ์„ธ์š”
์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

๋ณ„์  ์ €์žฅ๋จ

5
0
4
0
3
0
2
0
1
0
์•„์ง ๋ฆฌ๋ทฐ ์—†์Œ
๊ถŒํ•œ ๋ฐ ๋ฐ์ดํ„ฐ๋” ์•Œ์•„๋ณด๊ธฐ

ํ•„์š”ํ•œ ๊ถŒํ•œ:

  • ๋ชจ๋“  ์›น์‚ฌ์ดํŠธ์—์„œ ์‚ฌ์šฉ์ž์˜ ๋ฐ์ดํ„ฐ์— ์ ‘๊ทผ
์ถ”๊ฐ€ ์ •๋ณด
๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ๋งํฌ
  • ํ™ˆ ํŽ˜์ด์ง€
  • ์ง€์› ์‚ฌ์ดํŠธ
  • ์ง€์› ์ด๋ฉ”์ผ
๋ฒ„์ „
1.1
ํฌ๊ธฐ
839.94 KB
๋งˆ์ง€๋ง‰ ์—…๋ฐ์ดํŠธ
์ผ ๋…„ ์ „ (2024๋…„ 6์›” 6์ผ)
๊ด€๋ จ ์นดํ…Œ๊ณ ๋ฆฌ
  • ์›น ๊ฐœ๋ฐœ ๋„๊ตฌ
  • ์™ธ์–‘
๋ผ์ด์„ ์Šค
CC BY-NC-ND
๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ
์ด ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ๊ฐœ์ธ์ •๋ณด์ฒ˜๋ฆฌ๋ฐฉ์นจ ์ฝ๊ธฐ
๋ฒ„์ „ ๋ชฉ๋ก
  • ๋ชจ๋“  ๋ฒ„์ „ ๋ณด๊ธฐ
๋ชจ์Œ์ง‘์— ์ถ”๊ฐ€
์ด ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ์‹ ๊ณ 
Prajwal ๋‹˜์˜ ๋‹ค๋ฅธ ํ™•์žฅ ๊ธฐ๋Šฅ
  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

  • ์•„์ง ํ‰์ ์ด ์—†์Šต๋‹ˆ๋‹ค

Mozilla ํ™ˆํŽ˜์ด์ง€๋กœ ์ด๋™

๋ถ€๊ฐ€ ๊ธฐ๋Šฅ

  • ์†Œ๊ฐœ
  • Firefox ๋ถ€๊ฐ€ ๊ธฐ๋Šฅ ๋ธ”๋กœ๊ทธ
  • ํ™•์žฅ ๊ธฐ๋Šฅ ์›Œํฌ์ƒต
  • ๊ฐœ๋ฐœ์ž ํ—ˆ๋ธŒ
  • ๊ฐœ๋ฐœ์ž ์ •์ฑ…
  • ์ปค๋ฎค๋‹ˆํ‹ฐ ๋ธ”๋กœ๊ทธ
  • ํฌ๋Ÿผ
  • ๋ฒ„๊ทธ ์‹ ๊ณ 
  • ๋ฆฌ๋ทฐ ์ง€์นจ

๋ธŒ๋ผ์šฐ์ €

  • Desktop
  • Mobile
  • Enterprise

์ œํ’ˆ

  • Browsers
  • VPN
  • Relay
  • Monitor
  • Pocket
  • Bluesky (@firefox.com)
  • Instagram (Firefox)
  • YouTube (firefoxchannel)
  • ๊ฐœ์ธ ์ •๋ณด
  • ์ฟ ํ‚ค
  • ๋ฒ•๋ฅ 

ํŠน๋ณ„ํ•œ ๊ณ ์ง€๊ฐ€ ์—†๋Š” ํ•œ, ๋ณธ ์‚ฌ์ดํŠธ์˜ ์ฝ˜ํ…์ธ ๋Š” Commons Attribution Share-Alike License v3.0 ๋˜๋Š” ๊ทธ ์ดํ›„ ๋ฒ„์ „์— ๋”ฐ๋ผ ์‚ฌ์šฉ์ด ํ—ˆ๊ฐ€๋ฉ๋‹ˆ๋‹ค.