Color Picker

ใƒ”ใƒƒใ‚ซใƒผ
HEX
R
G
B
A
ใ‚นใƒˆใƒƒใƒ—
็”ปๅƒใ‚’ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰
1background: #FF930F;
2background: linear-gradient(90deg, rgba(255, 147, 15, 1) 0%,rgba(255, 249, 91, 1) 100%)

ใƒˆใƒฌใƒณใƒ‰ใ‚ซใƒฉใƒผ

่‰ฒใ‚’้ธใ‚“ใงใ™ใไฝœๆฅญ โ€” ้ขๅ€’ใชใ—

้‡ใ„ใ‚ขใƒ—ใƒชใ‚„่ค‡้›‘ใ™ใŽใ‚‹่‰ฒใƒ„ใƒผใƒซใซใ†ใ‚“ใ–ใ‚Šใ—ใฆใ€2025 ๅนดใซ Color Picker ใ‚’ไฝœใ‚Šใพใ—ใŸใ€‚ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บ่€…๏ผใ‚คใƒฉใ‚นใƒˆใƒฌใƒผใ‚ฟใƒผใจใ—ใฆใ€่‰ฒใ‚’ใ™ใๆ‹พใฃใฆๅฐ‘ใ—่ชฟๆ•ดใ—ใ€ใใฎใพใพ้€ฒใ‚ใ‚‹ๆ–นๆณ•ใŒๅฟ…่ฆใ ใฃใŸใฎใงใ™ใ€‚็คพๅ†…ใƒ„ใƒผใƒซใจใ—ใฆๅง‹ใพใ‚Šใ€ๅŒๅƒšใฎใŠๆฐ—ใซๅ…ฅใ‚Šใจใชใ‚Šใ€็ฃจใใ‚’ใ‹ใ‘ใฆ่ชฐใงใ‚‚ไฝฟใˆใ‚‹ Web ็‰ˆใซใ€‚ใ‚ขใ‚ซใ‚ฆใƒณใƒˆไธ่ฆใƒปๅญฆ็ฟ’ใ‚ณใ‚นใƒˆใ‚ผใƒญ โ€” ใƒšใƒผใ‚ธใ‚’้–‹ใใ€ใƒˆใƒผใƒณใ‚’้ธใณใ€HEXใƒปRGBใƒปHSLใƒปHSV ใฎใ‚ณใƒผใƒ‰ใ‚’ใ‚ณใƒ”ใƒผใ™ใ‚‹ใ ใ‘ใ€‚

็งใŸใกใฎใ‚ซใƒฉใƒผใƒ”ใƒƒใ‚ซใƒผใŒๅฅฝ่ฉ•ใช็†็”ฑ

ใƒ‡ใ‚ถใ‚คใƒณใ‚’ๅ‰ใซใ€Œใ“ใฎ็ตถๅฆ™ใชใƒˆใƒผใƒณใฏใฉใ†ๅ‡บใ™๏ผŸใ€ใจๆ€ใฃใŸใ“ใจใŒใ‚ใ‚‹ใชใ‚‰ใ€Color Picker ใฎใ‚ทใƒณใƒ—ใƒซใ•ใ‚’ๆฐ—ใซๅ…ฅใฃใฆใ„ใŸใ ใ‘ใ‚‹ใฏใšใ€‚UI ใฏใ‚ใˆใฆใƒŸใƒ‹ใƒžใƒซใซใ—ใพใ—ใŸ๏ผš

  • ใ‚ฏใƒชใƒƒใ‚ฏไธ€ใคใง่‰ฒใŒๆ‰‹ใซๅ…ฅใ‚‹ โ€” ใƒ‘ใƒฌใƒƒใƒˆใฎไปปๆ„ใฎ็‚นใ‚’ใ‚ฟใƒƒใƒ—ใ™ใ‚‹ใจๅฟ…่ฆใชๅ€คใ‚’ๅณ่กจ็คบใ€‚ๅ†™็œŸใ‚„ใ‚นใ‚ฏใ‚ทใƒงใ‹ใ‚‰ๅ–ใ‚ŠใŸใ„๏ผŸ ใƒšใƒผใ‚ธใซใƒ‰ใƒญใƒƒใƒ—ใ—ใฆใ‚นใƒใ‚คใƒˆใงใฉใ†ใžใ€‚
  • ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใŒใ‹ใ‚“ใŸใ‚“ โ€” ใƒใƒผไธŠใงใ‚นใƒˆใƒƒใƒ—ใ‚’่ฟฝๅŠ ใƒป็งปๅ‹•ใ—ใฆใ‚ทใƒซใ‚ญใƒผใช้ท็งปใ‚’ไฝœๆˆใ€‚็ทšๅฝข๏ผๆ”พๅฐ„็Šถใ‚’ๅˆ‡ใ‚Šๆ›ฟใˆใ€่ง’ๅบฆใจไธ้€ๆ˜Žๅบฆใ‚’ๅพฎ่ชฟๆ•ดใ—ใฆ CSS ใ‚’ใ‚ณใƒ”ใƒผใ€‚
  • ๅˆถ้™ใชใ—ใƒป่ฒป็”จใชใ— โ€” ใƒ‡ใ‚นใ‚ฏใƒˆใƒƒใƒ—๏ผใ‚ฟใƒ–ใƒฌใƒƒใƒˆ๏ผใ‚นใƒžใƒ›ใฎใ‚ใ‚‰ใ‚†ใ‚‹ใƒขใƒ€ใƒณใƒ–ใƒฉใ‚ฆใ‚ถใƒผใงๅ‹•ไฝœใ€‚ใ‚คใƒณใ‚นใƒˆใƒผใƒซไธ่ฆใ€ๆ–™้‡‘ใ‚‚ไธ่ฆใ€‚
  • ๅฟ…่ฆใชใจใใซๆ‹กๅผตๆฉŸ่ƒฝ โ€” ใ‚ชใƒ—ใ‚ทใƒงใƒณใฎ ChromeใƒปEdge ๆ‹กๅผตใŒใ‚นใƒใ‚คใƒˆใ‚’ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใซ็›ด็ตใ€‚ใฉใฎใƒšใƒผใ‚ธใ‹ใ‚‰ใงใ‚‚่‰ฒใ‚’ๅ–ๅพ—ใ—ใ€ๅฑฅๆญดใ‚‚ๆฎ‹ใ›ใพใ™ใ€‚

ไธปใชๆฉŸ่ƒฝ

ใ‚นใƒใ‚คใƒˆ

ใ‚ขใƒƒใƒ—ใƒญใƒผใƒ‰ใ—ใŸ็”ปๅƒใ‚„็”ป้ขไธŠใฎไปปๆ„ใฎๅ ดๆ‰€ใ‹ใ‚‰็›ดๆŽฅ่‰ฒใ‚’ๅ–ๅพ—ใ€‚ใƒ•ใ‚กใ‚คใƒซใ‚’ใƒšใƒผใ‚ธใซใƒ‰ใƒญใƒƒใƒ—ใ—ใ€ใƒ”ใ‚ฏใ‚ปใƒซใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจ่ค‡ๆ•ฐๅฝขๅผใฎๅ€คใ‚’่กจ็คบใ—ใพใ™ใ€‚

ๅฝขๅผๅค‰ๆ›

HEXใƒปRGBใƒปHSLใƒปHSV ใ‚’็žฌๆ™‚ใซๅˆ‡ใ‚Šๆ›ฟใˆใ€CSS ใ‚„ใƒ‡ใ‚ถใ‚คใƒณใ‚ฝใƒ•ใƒˆ๏ผใƒ‘ใƒฌใƒƒใƒˆใƒ„ใƒผใƒซใธใ‚ณใƒผใƒ‰ใ‚’ใ‚ณใƒ”ใƒผใ€‚

ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใƒกใƒผใ‚ซใƒผ

ใ‚นใƒˆใƒƒใƒ—ใฎ่ฟฝๅŠ ใƒป็งปๅ‹•ใ€่ง’ๅบฆใจไธ้€ๆ˜Žๅบฆใฎ่ชฟๆ•ดใง็ทšๅฝข๏ผๆ”พๅฐ„็Šถใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใ‚’ไฝœๆˆใ—ใ€ไป•ไธŠใ’ใฎ CSS ใ‚’ใ‚ณใƒ”ใƒผใ€‚

่‰ฒใฎๅฑฅๆญด

้ธใ‚“ใ ่‰ฒใฏใ™ในใฆไฟๅญ˜ใ•ใ‚Œใ€ใ‚ใจใง่ฆ‹่ฟ”ใ—ใŸใ‚Šๅ†ๅˆฉ็”จใงใใพใ™ใ€‚

ใƒ–ใƒฉใ‚ฆใ‚ถใƒผๆ‹กๅผตๆฉŸ่ƒฝ

Chrome ใจ Edge ใฎใ‚ชใƒ—ใ‚ทใƒงใƒณๆ‹กๅผตใงใ€ไปปๆ„ใฎใ‚ตใ‚คใƒˆใ‹ใ‚‰่‰ฒใ‚’ๅ–ๅพ—ใ—ใ€ใƒ„ใƒผใƒซใƒใƒผใ‹ใ‚‰็›ดๆŽฅ่ตทๅ‹•ใงใใพใ™ใ€‚

ใƒฆใƒ‹ใƒใƒผใ‚ตใƒซใ‚ขใ‚ฏใ‚ปใ‚น

ๆœ€ๆ–ฐใฎไธป่ฆใƒ–ใƒฉใ‚ฆใ‚ถใƒผใงๅ‹•ไฝœใ€‚ๆ‹กๅผตๆฉŸ่ƒฝใฏๅคš่จ€่ชžๅฏพๅฟœใงๅฎšๆœŸ็š„ใซๆ›ดๆ–ฐใ•ใ‚Œใพใ™ใ€‚

็„กๆ–™๏ผ†ใƒ—ใƒฉใ‚คใƒใ‚ทใƒผ้‡่ฆ–

ใ‚ตใƒผใƒ“ใ‚นใฏ็„กๆ–™ใ€‚ใ‚ใชใŸใฎใƒ‡ใƒผใ‚ฟใ‚’ๅ•†็”จๅˆฉ็”จใ™ใ‚‹ใ“ใจใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚

็”จ้€”

Color Picker ใฎไฝฟใ„ๆ–นใฏใ„ใ‚ใ„ใ‚๏ผš

  • ใƒ‡ใ‚ถใ‚คใƒŠใƒผใจใƒ—ใƒญใƒ€ใ‚ฏใƒˆใƒใƒผใƒ  ใฏใ€UI ใ‚„ใƒ–ใƒฉใƒณใƒ‰ใƒ‘ใƒฌใƒƒใƒˆใฎไธ‹ๆใใซๆดป็”จใ€‚็ต„ใฟๅˆใ‚ใ›ใฎๆคœ่จผใ‚„ใ€ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใซๅฟ…่ฆใช CSS ใฎใ‚ณใƒ”ใƒผใŒ็ด ๆ—ฉใ่กŒใˆใพใ™ใ€‚
  • ใ‚คใƒฉใ‚นใƒˆใƒฌใƒผใ‚ฟใƒผใ‚„ใ‚ขใƒผใƒ†ใ‚ฃใ‚นใƒˆ ใฏใ€ๅ†™็œŸใ‚„็ตต็”ปใ‹ใ‚‰ใ‚คใƒณใ‚นใƒ”ใƒฌใƒผใ‚ทใƒงใƒณใ‚’ๅพ—ใ‚‹ใŸใ‚ใซใ‚นใƒใ‚คใƒˆใ‚’ไฝฟ็”จใ€‚ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใƒ„ใƒผใƒซใฏๆป‘ใ‚‰ใ‹ใช้™ฐๅฝฑใ‚„่‰ฒใฎ้ท็งป่จญ่จˆใซๅฝน็ซ‹ใกใพใ™ใ€‚
  • ใƒ•ใƒญใƒณใƒˆใ‚จใƒณใƒ‰้–‹็™บ่€… ใฏใ€ใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆ้–“ใงไธ€่ฒซใ—ใŸ่‰ฒๅ€คใ‚’ไฝœใ‚‹ใŸใ‚ใซ้ ผใ‚Šใซใ—ใพใ™ใ€‚ๆ‹กๅผตๆฉŸ่ƒฝใซใ‚ˆใ‚Šๆ—ขๅญ˜ใ‚ตใ‚คใƒˆใ‹ใ‚‰ใฎใ‚ตใƒณใƒ—ใƒชใƒณใ‚ฐใ‚‚็ฐกๅ˜ใงใ™ใ€‚
  • ใ‚ขใ‚ฏใ‚ปใ‚ทใƒ“ใƒชใƒ†ใ‚ฃใ‚’็ขบ่ชใ™ใ‚‹ไบบ ใฏใ€ใ•ใพใ–ใพใชใƒขใƒ‡ใƒซใง่‰ฒใ‚’็ขบ่ชใ—ใ€ใ‚ณใƒณใƒˆใƒฉใ‚นใƒˆๅŸบๆบ–ใ‚’ๆบ€ใŸใ™ใพใงไธ้€ๆ˜Žๅบฆใ‚’่ชฟๆ•ดใงใใพใ™ใ€‚

ใฏใ˜ใ‚ใซ

ใƒžใƒ‹ใƒฅใ‚ขใƒซใฏไธ่ฆใงใ™ โ€” ใ‚ฏใ‚คใƒƒใ‚ฏใ‚ฌใ‚คใƒ‰ใฏใ“ใกใ‚‰๏ผš

  • ่‰ฒใ‚’้ธใถ โ€” ใƒ‘ใƒฌใƒƒใƒˆใฎใฉใ“ใงใ‚‚ใ‚ฏใƒชใƒƒใ‚ฏใ€‚HEXใƒปRGBใƒปHSV ใฎๅ€คใŒใ™ใ่กจ็คบใ•ใ‚Œใพใ™ใ€‚ใ‚นใƒฉใ‚คใƒ€ใƒผใง่‰ฒ็›ธใƒปๅฝฉๅบฆใƒปๆ˜Žๅบฆใƒปไธ้€ๆ˜Žๅบฆใ‚’ๅพฎ่ชฟๆ•ดใ—ใพใ—ใ‚‡ใ†ใ€‚
  • ็”ปๅƒใ‹ใ‚‰ใ‚ตใƒณใƒ—ใƒซใ‚’ๅ–ใ‚‹ โ€” ็”ปๅƒใƒ•ใ‚กใ‚คใƒซใ‚’ใƒšใƒผใ‚ธใซใƒ‰ใƒฉใƒƒใ‚ฐใ™ใ‚‹ใ‹้ธๆŠžใ—ใพใ™ใ€‚็›ฎ็š„ใฎใƒ”ใ‚ฏใ‚ปใƒซใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ™ใ‚‹ใจ่‰ฒใ‚ณใƒผใƒ‰ใŒ่กจ็คบใ•ใ‚Œใพใ™ใ€‚
  • ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใ‚’ไฝœใ‚‹ โ€” ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใƒใƒผใ‚’ใ‚ฏใƒชใƒƒใ‚ฏใ—ใฆใ‚นใƒˆใƒƒใƒ—ใ‚’่ฟฝๅŠ ใ—ใ€ใƒ‰ใƒฉใƒƒใ‚ฐใง็งปๅ‹•ใ€‚็ทšๅฝขใจๆ”พๅฐ„็Šถใ‚’ๅˆ‡ใ‚Šๆ›ฟใˆใ€่ง’ๅบฆใจไธ้€ๆ˜Žๅบฆใ‚’่ชฟๆ•ดใ—ใพใ™ใ€‚
  • ใ‚ณใƒ”ใƒผใ—ใฆๅ†ๅˆฉ็”จ โ€” ้ธใ‚“ใ ่‰ฒใ‚„ใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใฏ่‡ชๅ‹•ไฟๅญ˜ใ•ใ‚Œใพใ™ใ€‚ใ‚ณใƒผใƒ‰ใ‚„ CSS ใ‚’ใ‚ณใƒ”ใƒผใ—ใฆใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใซ่ฒผใ‚Šไป˜ใ‘ใŸใ‚Šใ€ใƒใƒผใƒ ใจๅ…ฑๆœ‰ใ—ใพใ—ใ‚‡ใ†ใ€‚

Color Picker ใ‚’ใ‚ชใƒณใƒฉใ‚คใƒณใงไฝฟใ†ๆ–นๆณ•

CSS Gradient Generator

Chrome ใจ Edge ๅ‘ใ‘ๆ‹กๅผตๆฉŸ่ƒฝ

Web ใƒšใƒผใ‚ธไธŠใฎ่‰ฒใ‚’ใใฎใพใพใ€Œใ‚นใƒใ‚คใƒˆใ€ใ—ใŸใ„๏ผŸ Chrome ็”จใฎ Color Picker โ€“ Eye Dropper ใจใ€Edge ็”จใฎ Eyedropper โ€“ Color Picker ใŒๅฎŸ็พใ—ใพใ™ใ€‚ใƒ–ใƒฉใ‚ฆใ‚ถใƒผใซๅฐใ•ใชใƒœใ‚ฟใƒณใŒ่ฟฝๅŠ ใ•ใ‚Œใ€่ฆ็ด ใซใ‚ซใƒผใ‚ฝใƒซใ‚’ๅˆใ‚ใ›ใ‚‹ใ ใ‘ใง่‰ฒใ‚’ๅ–ๅพ—ๅฏ่ƒฝใ€‚ใƒใƒƒใƒ—ใ‚ขใƒƒใƒ—ใ‹ใ‚‰็”ปๅƒใ‚’่ชญใฟ่พผใ‚“ใง่‰ฒใ‚’ๆททใœใฆใ‚ฐใƒฉใƒ‡ใƒผใ‚ทใƒงใƒณใ‚’ไฝœๆˆใ—ใ€CSS ใ‚’ใ‚ณใƒ”ใƒผใ™ใ‚‹ใ“ใจใ‚‚ใงใใพใ™ใ€‚ๅคš่จ€่ชžๅฏพๅฟœใงใ€ๅฎšๆœŸ็š„ใซๆ›ดๆ–ฐใ—ใฆใ„ใพใ™ใ€‚

ไฟก้ ผใงใใ‚‹ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃ่ฃฝใƒ„ใƒผใƒซ

ใ€ŒใŸใ ๅ‹•ใใ€ใ‚ทใƒณใƒ—ใƒซใชใƒ„ใƒผใƒซใŒๆฌฒใ—ใใฆ Color Picker ใ‚’ไฝœใ‚Šใพใ—ใŸใ€‚ไปŠใ‚‚ใ‚ณใƒŸใƒฅใƒ‹ใƒ†ใ‚ฃใฎใƒ—ใƒญใ‚ธใ‚งใ‚ฏใƒˆใงใ€ใ“ใ‚Œใ‹ใ‚‰ใ‚‚็„กๆ–™ใงใ™ใ€‚็งใŸใกใฏใ‚ใชใŸใฎใƒ‡ใƒผใ‚ฟใ‚’ๅŽ้›†ใƒป่ฒฉๅฃฒใ—ใพใ›ใ‚“ใ€‚ไพฟๅˆฉใ ใจๆ„Ÿใ˜ใŸใ‚‰ใ€ๆ‹กๅผตๆฉŸ่ƒฝใฎใ‚คใƒณใ‚นใƒˆใƒผใƒซใ‚„ใ‚ตใ‚คใƒˆใฎๅ…ฑๆœ‰ใงใ€ใ‚ˆใ‚ŠๅคšใใฎไบบใซๅฑŠใใ‚ˆใ†ใ”ๅ”ๅŠ›ใใ ใ•ใ„ใ€‚

ใƒ‡ใƒผใ‚ฟใฎๅ–ใ‚Šๆ‰ฑใ„ใซใคใ„ใฆใฏใ€ใ“ใกใ‚‰ใฎใƒšใƒผใ‚ธใ‚’ใ”่ฆงใใ ใ•ใ„๏ผš ใƒ—ใƒฉใ‚คใƒใ‚ทใƒผใƒใƒชใ‚ทใƒผ , ๅˆฉ็”จ่ฆ็ด„.