{"id":210,"date":"2026-09-03T01:35:13","date_gmt":"2026-09-02T16:35:13","guid":{"rendered":"https:\/\/jim-jin.com\/?page_id=210"},"modified":"2026-10-08T19:06:09","modified_gmt":"2026-10-08T10:06:09","slug":"colorpicker","status":"publish","type":"page","link":"https:\/\/jim-jin.com\/en\/colorpicker","title":{"rendered":"Color Picker | HEX, RGB, HSL and CMYK"},"content":{"rendered":"\n<!-- \u65e5\u672c\u8a9eWeb\u30d5\u30a9\u30f3\u30c8\u3092\u8aad\u307f\u8fbc\u307f -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+JP:wght@600;700&amp;display=swap\" rel=\"stylesheet\">\n\n<section aria-labelledby=\"apple-hero-title\" style=\"\n    position: relative;\n    left: 50%;\n    width: 100vw;\n    min-height: 216px;\n    margin-left: -50vw;\n    padding: 50px 24px 28px;\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    overflow: hidden;\n    background-color: #f4f4ff;\n    color: #1d1d1f;\n    text-align: center;\n    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont,\n      'Helvetica Neue', 'Hiragino Sans', 'Yu Gothic', Meiryo, sans-serif;\n    font-feature-settings: 'palt' 1;\n    -webkit-font-smoothing: antialiased;\n    text-rendering: optimizeLegibility;\n  \">  <div style=\"\n      width: 100%;\n      max-width: 1000px;\n      margin: 0 auto;\n    \">\n    <h1 id=\"apple-hero-title\" style=\"\n        margin: 0;\n        padding: 0;\n        border: 0;\n        background: none;\n        color: #1d1d1f;\n        font-family: inherit;\n        font-size: clamp(42px, 4vw, 64px);\n        font-weight: 700;\n        line-height: 1.08;\n        letter-spacing: -0.045em;\n      \">\n     Choose a color from the palette<br>and get its color code for free\n    <\/h1>\n\n    <p style=\"\n        max-width: 760px;\n        margin: 18px auto 0;\n        padding: 0;\n        color: #6e6e73;\n        font-family: inherit;\n        font-size: clamp(16px, 1.35vw, 20px);\n        font-weight: 600;\n        line-height: 1.45;\n        letter-spacing: -0.025em;\n      \">\n     Pick HEX colors and adjust opacity.\n    <\/p>\n  <\/div>\n<\/section>\n\n\n        <div class=\"jwtc-member-status jwtc-member-status--horizontal\" data-jwtc-member-status data-endpoint=\"https:\/\/jim-jin.com\/en\/?jwtc_action=jwtc_member_status\" role=\"region\" aria-label=\"Member sign-in status\">\n            <div class=\"jwtc-member-status__details\" aria-live=\"polite\" aria-atomic=\"true\" aria-busy=\"true\">\n                <span class=\"jwtc-member-status__avatar\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"8\" r=\"3.5\"\/><path d=\"M5 21v-2a7 7 0 0 1 14 0v2\"\/><\/svg><\/span>\n                <span class=\"jwtc-member-status__person\"><strong data-member-field=\"name\">Hello<\/strong><small data-member-field=\"status\">Checking\u2026<\/small><\/span>\n                <span class=\"jwtc-member-status__plan\" data-member-field=\"plan\"><\/span>\n            <\/div>\n            <nav class=\"jwtc-member-status__links\" aria-label=\"Member menu\">\n                <a href=\"https:\/\/jim-jin.com\/en\/registration\">Create a free account or sign in<\/a>\n            <\/nav>\n            <p class=\"jwtc-member-status__error\" hidden>Could not check your sign-in status.<button type=\"button\" data-member-retry>Retry<\/button><\/p>\n            <noscript><p>Enable JavaScript to display your sign-in status. You can still open the account page using the links.<\/p><\/noscript>\n        <\/div>\n        \n\n\n\t\t<article data-jin-language=\"en\" lang=\"en\" id=\"jin-color-picker-1\" class=\"jin-color-picker\">\n\t\t\t<header class=\"jin-color-picker__header\">\n\t\t\t\t<div class=\"jin-color-picker__logo\">\n\t\t\t\t\t<img decoding=\"async\" width=\"300\" height=\"300\" src=\"https:\/\/jim-jin.com\/en\/wp-content\/uploads\/2026\/09\/15-color-picker-300x300.png\" class=\"jin-color-picker__logo-image\" alt=\"\" title=\"Color Picker\" \/>\t\t\t\t<\/div>\n\t\t\t\t<h1 class=\"jin-color-picker__title\">Color Picker<\/h1>\n\t\t\t<\/header>\n\t\t\t<nav class=\"jin-public-steps\" data-jin-public-steps aria-label=\"Workflow\"><ol><li aria-current=\"step\"><button type=\"button\" data-target=\"[data-color-palette], [data-color-hue], [data-color-alpha], [data-color-swatches]\"><span class=\"jin-public-steps__number\">1<\/span><span>Choose a color<small class=\"jin-public-steps__state\">Current step<\/small><\/span><\/button><\/li><li><button type=\"button\" data-target=\"[data-color-field], [data-color-output]\"><span class=\"jin-public-steps__number\">2<\/span><span>Review color values<small class=\"jin-public-steps__state\">Upcoming<\/small><\/span><\/button><\/li><li><button type=\"button\" data-target=\"[data-color-copy]\"><span class=\"jin-public-steps__number\">3<\/span><span>Copy<small class=\"jin-public-steps__state\">Upcoming<\/small><\/span><\/button><\/li><\/ol><\/nav>\t\t\t<section\n\t\t\t\tclass=\"jin-color-picker__account\"\n\t\t\t\taria-label=\"Account information\"\n\t\t\t>\n\t\t\t\t<span>Guest<\/span><span aria-hidden=\"true\">\uff5c<\/span>\n\t\t\t\t<span class=\"jin-color-picker__badge jin-color-picker__badge--free\">\n\t\t\t\t\tFree\t\t\t\t<\/span><span aria-hidden=\"true\">\uff5c<\/span>\n\t\t\t\t<span>Not signed in<\/span><span aria-hidden=\"true\">\uff5c<\/span>\n\t\t\t\t<span>Usage: unlimited<\/span>\n\t\t\t<\/section>\n\t\t\t<aside class=\"jin-color-picker__privacy\" role=\"note\">\n\t\t\t\t<span aria-hidden=\"true\">\ud83d\udd12<\/span><p>This tool does not store your input on a server. If storage is needed, a notice is shown beforehand.<\/p>\n\t\t\t<\/aside>\n\t\t\t<section\n\t\t\t\tclass=\"jin-color-picker__intro\"\n\t\t\t\taria-label=\"About this tool\"\n\t\t\t>\n\t\t\t\t<h2>About this tool<\/h2><p>Choose colors from a list, palette or numeric input, then view and copy several color formats together.<\/p>\t\t\t<\/section>\n\t\t\t<section\n\t\t\t\tclass=\"jin-color-picker__main\"\n\t\t\t\taria-label=\"Color selection and conversion\"\n\t\t\t>\n\t\t\t\t\t\t<div class=\"jin-color-picker__workspace\" data-jin-color-picker data-initial-color=\"#336699\" data-initial-alpha=\"100\" data-recommendation-template=\"Recommended text color: {color}\" data-white-label=\"White\" data-black-label=\"Black\" data-invalid-message=\"Check the input values. Color updates and copying are disabled until valid values are entered.\" data-copy-success-template=\"Copied {format}.\" data-copy-error-message=\"Could not copy. Select and copy the displayed value.\" data-all-colors-selected=\"Selected {color}.\">\n\t\t\t<section class=\"jin-color-picker__all-colors\" aria-labelledby=\"jin-color-picker-1-all-colors\">\n\t\t\t\t<h2 id=\"jin-color-picker-1-all-colors\">\n\t\t\t\t\tChoose from the color swatches\t\t\t\t<\/h2>\n\t\t\t\t<p id=\"jin-color-picker-1-all-colors-description\">\n\t\t\t\t\tChoose a swatch to update every color value. Use the palette or numeric fields below for finer adjustments.\t\t\t\t<\/p>\n\t\t\t\t<div class=\"jin-color-picker__swatch-grid\" role=\"group\" aria-labelledby=\"jin-color-picker-1-all-colors\" aria-describedby=\"jin-color-picker-1-all-colors-description\" data-color-swatches><\/div>\n\t\t\t<\/section>\n\t\t\t<div class=\"jin-color-picker__editor\">\n\t\t\t\t<section class=\"jin-color-picker__controls\" aria-labelledby=\"jin-color-picker-1-controls\">\n\t\t\t\t\t<h2 id=\"jin-color-picker-1-controls\">Choose a color<\/h2>\n\t\t\t\t\t<div class=\"jin-color-picker__palette\" role=\"slider\" tabindex=\"0\" aria-label=\"Saturation and brightness\" aria-valuetext=\"\" data-color-palette><span class=\"jin-color-picker__palette-handle\" data-color-palette-handle><\/span><\/div>\n\t\t\t\t\t<label class=\"jin-color-picker__range\">\n\t\t\t\t\t\t<span class=\"jin-color-picker__range-heading\">\n\t\t\t\t\t\t\t<span>Hue<\/span>\n\t\t\t\t\t\t\t<output aria-hidden=\"true\" data-color-hue-value>0\u00b0<\/output>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<input type=\"range\" min=\"0\" max=\"360\" step=\"1\" value=\"0\" aria-label=\"Hue\" data-color-hue>\n\t\t\t\t\t<\/label>\n\t\t\t\t\t<label class=\"jin-color-picker__range\">\n\t\t\t\t\t\t<span class=\"jin-color-picker__range-heading\">\n\t\t\t\t\t\t\t<span>Opacity<\/span>\n\t\t\t\t\t\t\t<output aria-hidden=\"true\" data-color-alpha-value>\n\t\t\t\t\t\t\t\t100%\n\t\t\t\t\t\t\t<\/output>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<input type=\"range\" min=\"0\" max=\"100\" step=\"1\" value=\"100\" aria-label=\"Opacity\" data-color-alpha>\n\t\t\t\t\t\t<span class=\"jin-color-picker__range-ends\" aria-hidden=\"true\">\n\t\t\t\t\t\t\t<span>Transparent<\/span><span>Opaque<\/span>\n\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/label>\n\t\t\t\t<\/section>\n\t\t\t\t<section class=\"jin-color-picker__preview-panel\" aria-labelledby=\"jin-color-picker-1-preview-title\">\n\t\t\t\t\t<h2 id=\"jin-color-picker-1-preview-title\">Selected color<\/h2>\n\t\t\t\t\t<div class=\"jin-color-picker__preview-comparison\">\n\t\t\t\t\t\t<div><span>With transparency<\/span><div class=\"jin-color-picker__checker\">\n\t\t\t\t\t\t\t<div class=\"jin-color-picker__preview\" data-color-preview>\n\t\t\t\t\t\t\t\t<span class=\"jin-color-picker__sample jin-color-picker__sample--white\" data-color-text-sample=\"white\">White text sample<\/span>\n\t\t\t\t\t\t\t\t<span class=\"jin-color-picker__sample jin-color-picker__sample--black\" data-color-text-sample=\"black\">Black text sample<\/span>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div><\/div>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<span>Without transparency<\/span>\n\t\t\t\t\t\t\t<div class=\"jin-color-picker__opaque-preview\" data-color-opaque-preview><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<p class=\"jin-color-picker__recommendation\" data-color-recommendation><\/p>\n\t\t\t\t<\/section>\n\t\t\t<\/div>\n\t\t\t<p class=\"jin-color-picker__status\" role=\"status\" aria-live=\"polite\" data-color-status>\n\t\t\t\tYou can change the color values.\n\t\t\t<\/p>\n\t\t\t<section aria-labelledby=\"jin-color-picker-1-formats\">\n\t\t\t\t<h2 id=\"jin-color-picker-1-formats\">Color values<\/h2>\n\t\t\t\t<div class=\"jin-color-picker__formats\">\n\t\t\t\t\t<section class=\"jin-color-picker__format-card\"><h3>HEX<\/h3><div class=\"jin-color-picker__fields\"><label class=\"jin-color-picker__text-field\" for=\"jin-color-picker-1-hex\">Value<input id=\"jin-color-picker-1-hex\" type=\"text\" spellcheck=\"false\" autocomplete=\"off\" data-color-field=\"hex\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"hex\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"hex\" data-color-format-label=\"HEX\">Copy HEX<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>HEX8<\/h3><div class=\"jin-color-picker__fields\"><label class=\"jin-color-picker__text-field\" for=\"jin-color-picker-1-hex8\">Value<input id=\"jin-color-picker-1-hex8\" type=\"text\" spellcheck=\"false\" autocomplete=\"off\" data-color-field=\"hex8\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"hex8\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"hex8\" data-color-format-label=\"HEX8\">Copy HEX8<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>RGB<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-rgb-r\"><span>R<\/span><input id=\"jin-color-picker-1-rgb-r\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgb-r\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-rgb-g\"><span>G<\/span><input id=\"jin-color-picker-1-rgb-g\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgb-g\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-rgb-b\"><span>B<\/span><input id=\"jin-color-picker-1-rgb-b\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgb-b\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"rgb\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"rgb\" data-color-format-label=\"RGB\">Copy RGB<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>RGBA<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-rgba-r\"><span>R<\/span><input id=\"jin-color-picker-1-rgba-r\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgba-r\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-rgba-g\"><span>G<\/span><input id=\"jin-color-picker-1-rgba-g\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgba-g\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-rgba-b\"><span>B<\/span><input id=\"jin-color-picker-1-rgba-b\" type=\"number\" min=\"0\" max=\"255\" step=\"1\" data-color-channel=\"rgba-b\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-rgba-a\"><span>A<\/span><input id=\"jin-color-picker-1-rgba-a\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"rgba-a\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"rgba\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"rgba\" data-color-format-label=\"RGBA\">Copy RGBA<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>HSL<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-hsl-h\"><span>H<\/span><input id=\"jin-color-picker-1-hsl-h\" type=\"number\" min=\"0\" max=\"360\" step=\"1\" data-color-channel=\"hsl-h\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsl-s\"><span>S<\/span><input id=\"jin-color-picker-1-hsl-s\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsl-s\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsl-l\"><span>L<\/span><input id=\"jin-color-picker-1-hsl-l\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsl-l\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"hsl\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"hsl\" data-color-format-label=\"HSL\">Copy HSL<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>HSLA<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-hsla-h\"><span>H<\/span><input id=\"jin-color-picker-1-hsla-h\" type=\"number\" min=\"0\" max=\"360\" step=\"1\" data-color-channel=\"hsla-h\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsla-s\"><span>S<\/span><input id=\"jin-color-picker-1-hsla-s\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsla-s\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsla-l\"><span>L<\/span><input id=\"jin-color-picker-1-hsla-l\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsla-l\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsla-a\"><span>A<\/span><input id=\"jin-color-picker-1-hsla-a\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsla-a\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"hsla\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"hsla\" data-color-format-label=\"HSLA\">Copy HSLA<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>HSV \/ HSB<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-hsv-h\"><span>H<\/span><input id=\"jin-color-picker-1-hsv-h\" type=\"number\" min=\"0\" max=\"360\" step=\"1\" data-color-channel=\"hsv-h\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsv-s\"><span>S<\/span><input id=\"jin-color-picker-1-hsv-s\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsv-s\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-hsv-v\"><span>V<\/span><input id=\"jin-color-picker-1-hsv-v\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"hsv-v\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"hsv\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"hsv\" data-color-format-label=\"HSV \/ HSB\">Copy HSV \/ HSB<\/button><\/section><section class=\"jin-color-picker__format-card\"><h3>CMYK (approximate)<\/h3><div class=\"jin-color-picker__fields\"><label for=\"jin-color-picker-1-cmyk-c\"><span>C<\/span><input id=\"jin-color-picker-1-cmyk-c\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"cmyk-c\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-cmyk-m\"><span>M<\/span><input id=\"jin-color-picker-1-cmyk-m\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"cmyk-m\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-cmyk-y\"><span>Y<\/span><input id=\"jin-color-picker-1-cmyk-y\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"cmyk-y\" aria-invalid=\"false\"><\/label><label for=\"jin-color-picker-1-cmyk-k\"><span>K<\/span><input id=\"jin-color-picker-1-cmyk-k\" type=\"number\" min=\"0\" max=\"100\" step=\"1\" data-color-channel=\"cmyk-k\" aria-invalid=\"false\"><\/label><\/div><output class=\"jin-color-picker__output\" data-color-output=\"cmyk\"><\/output><button type=\"button\" class=\"jin-color-picker__copy\" data-color-copy=\"cmyk\" data-color-format-label=\"CMYK (approximate)\">Copy CMYK (approximate)<\/button><\/section>\t\t\t\t<\/div>\n\t\t\t<\/section>\n\t\t\t<aside class=\"jin-color-picker__cmyk-note\" role=\"note\">\n\t\t\t\t<strong>About CMYK<\/strong><p>CMYK values are estimates calculated from the screen color. They do not guarantee the printed color.<\/p>\n\t\t\t<\/aside>\n\t\t<\/div>\n\t\t\t\t\t<\/section>\n\t\t<template data-jin-text=\"step-current\">Current step<\/template>\n<template data-jin-text=\"step-visited\">Visited step<\/template>\n<template data-jin-text=\"step-upcoming\">Upcoming<\/template>\n<template data-jin-text=\"message-001\">Choose {v0}<\/template>\n<template data-jin-text=\"message-002\">Hue {v0} degrees<\/template>\n<template data-jin-text=\"message-003\">Fully transparent<\/template>\n<template data-jin-text=\"message-004\">Opaque<\/template>\n<template data-jin-text=\"message-005\">Opacity {v0}<\/template>\n<template data-jin-text=\"message-006\">Saturation {v0}%, brightness {v1}%<\/template>\n<template data-jin-text=\"message-007\">Selected color {v0}<\/template>\n<template data-jin-text=\"message-008\">Recommended text color: {color}<\/template>\n<template data-jin-text=\"message-009\">White<\/template>\n<template data-jin-text=\"message-010\">Black<\/template>\n<template data-jin-text=\"message-011\">Check the input values.<\/template>\n<template data-jin-text=\"message-012\">Color updated.<\/template>\n<template data-jin-text=\"message-013\">Color updated.<\/template>\n<template data-jin-text=\"message-014\">Selected {color}.<\/template>\n<template data-jin-text=\"message-015\">Copied {format}.<\/template>\n<template data-jin-text=\"message-016\">Could not copy. Select and copy the displayed value.<\/template>\n<span hidden data-jin-language-fallback><template data-jin-text=\"step-current\">\u73fe\u5728\u306e\u624b\u9806<\/template>\n<template data-jin-text=\"step-visited\">\u78ba\u8a8d\u3057\u305f\u624b\u9806<\/template>\n<template data-jin-text=\"step-upcoming\">\u3053\u308c\u304b\u3089<\/template>\n<template data-jin-text=\"message-001\">{v0}\u3092\u9078\u3076<\/template>\n<template data-jin-text=\"message-002\">\u8272\u76f8{v0}\u5ea6<\/template>\n<template data-jin-text=\"message-003\">\u5b8c\u5168\u306b\u900f\u660e<\/template>\n<template data-jin-text=\"message-004\">\u4e0d\u900f\u660e<\/template>\n<template data-jin-text=\"message-005\">\u900f\u660e\u5ea6{v0}<\/template>\n<template data-jin-text=\"message-006\">\u5f69\u5ea6{v0}%\u3001\u660e\u308b\u3055{v1}%<\/template>\n<template data-jin-text=\"message-007\">\u9078\u629e\u4e2d\u306e\u8272 {v0}<\/template>\n<template data-jin-text=\"message-008\">\u304a\u3059\u3059\u3081\u306e\u6587\u5b57\u8272\uff1a{color}<\/template>\n<template data-jin-text=\"message-009\">\u767d<\/template>\n<template data-jin-text=\"message-010\">\u9ed2<\/template>\n<template data-jin-text=\"message-011\">\u5165\u529b\u5024\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/template>\n<template data-jin-text=\"message-012\">\u8272\u3092\u66f4\u65b0\u3057\u307e\u3057\u305f\u3002<\/template>\n<template data-jin-text=\"message-013\">\u8272\u3092\u66f4\u65b0\u3057\u307e\u3057\u305f\u3002<\/template>\n<template data-jin-text=\"message-014\">{color}\u3092\u9078\u3073\u307e\u3057\u305f\u3002<\/template>\n<template data-jin-text=\"message-015\">{format}\u3092\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3002<\/template>\n<template data-jin-text=\"message-016\">\u30b3\u30d4\u30fc\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002\u8868\u793a\u3055\u308c\u305f\u5024\u3092\u9078\u629e\u3057\u3066\u30b3\u30d4\u30fc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/template>\n<\/span><\/article>\n\t\t\n\n\n<style>\n\/* JIM-JIN Tool Guide v2.0 \/ SWELL\n   Scope twice intentionally: outranks SWELL .post_content rules.\n   Place after theme CSS, once site-wide. *\/\n.jj-guide.jj-guide {\n --jj-accent:#6b5290; --jj-soft:#f5f2fa; --jj-line:#dedbe5; --jj-text:#30323b; --jj-muted:#626571;\n display:block; box-sizing:border-box; width:100%; max-width:100%;\n margin:48px auto 32px; padding:40px; border:1px solid #d7d3df;\n border-radius:8px; background:#fff!important; background-image:none!important;\n color:var(--jj-text); font-family:inherit; font-size:1rem; line-height:1.9;\n letter-spacing:.02em; text-align:left; overflow-wrap:anywhere;\n box-shadow:0 3px 16px rgba(48,36,68,.035); isolation:isolate;\n}\n.jj-guide.jj-guide *, .jj-guide.jj-guide *::before, .jj-guide.jj-guide *::after {box-sizing:border-box;}\n.jj-guide.jj-guide :is(h2,h3,p,ol,li,dl,dt,dd,figure,figcaption,details,summary,code) {margin:0;padding:0;border:0;background:none;box-shadow:none;color:inherit;}\n.jj-guide.jj-guide :is(h2,h3) {position:static;font-family:inherit;font-weight:700;line-height:1.6;letter-spacing:.025em;}\n.jj-guide.jj-guide :is(h2,h3,li)::before,.jj-guide.jj-guide :is(h2,h3,li)::after {content:none!important;display:none!important;}\n.jj-guide.jj-guide h2 {font-size:1.3rem;}\n.jj-guide.jj-guide h3 {font-size:1.0625rem;}\n.jj-guide.jj-guide p + p {margin-top:10px;}\n.jj-guide.jj-guide .jj-guide__intro {padding:0 0 30px;border-bottom:1px solid var(--jj-line);}\n.jj-guide.jj-guide .jj-guide__eyebrow {color:var(--jj-accent);font-size:.8125rem;font-weight:700;letter-spacing:.06em;}\n.jj-guide.jj-guide .jj-guide__eyebrow span {margin:0 10px;color:#b7a9cd;}\n.jj-guide.jj-guide .jj-guide__intro h2 {padding:0;margin:14px 0 16px;font-size:1.875rem;line-height:1.65;background:none;color:var(--jj-text);}\n.jj-guide.jj-guide .jj-guide__intro h2 br {display:none;}\n.jj-guide.jj-guide .jj-guide__lead {color:var(--jj-muted);max-width:none;}\n.jj-guide.jj-guide .jj-guide__tags {display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}\n.jj-guide.jj-guide .jj-guide__tags span {padding:3px 10px;border:1px solid #e5dfed;background:#faf8fd;color:var(--jj-accent);font-size:.75rem;border-radius:3px;}\n.jj-guide.jj-guide .jj-guide__section {padding:32px 0 0;}\n.jj-guide.jj-guide .jj-guide__section-title {display:flex;align-items:center;gap:12px;margin:0 0 24px;padding:12px 16px;background:var(--jj-soft);border-left:3px solid var(--jj-accent);border-radius:0 4px 4px 0;}\n.jj-guide.jj-guide .jj-guide__section-title h2 {flex:1;min-width:0;padding:0;margin:0;color:#393044;background:none;}\n.jj-guide.jj-guide .jj-guide__index {font:600 .8125rem\/1.5 Arial,sans-serif;letter-spacing:.06em;color:var(--jj-accent);}\n.jj-guide.jj-guide .jj-guide__steps {display:grid;grid-template-columns:1fr;list-style:none;gap:0;}\n.jj-guide.jj-guide .jj-guide__steps li {position:relative;display:grid;grid-template-columns:82px 1fr;column-gap:20px;list-style:none;padding:0 0 24px 0;}\n.jj-guide.jj-guide .jj-guide__steps li + li {padding-top:24px;border-top:1px solid #eeecf2;}\n.jj-guide.jj-guide .jj-guide__steps li:last-child {padding-bottom:0;}\n.jj-guide.jj-guide .jj-guide__step-label {grid-row:1\/3;align-self:start;padding:7px 0;text-align:center;border:1px solid #d8cce8;border-radius:4px;color:var(--jj-accent);font:600 .75rem\/1.5 Arial,sans-serif;letter-spacing:.04em;background:#fff;}\n.jj-guide.jj-guide .jj-guide__steps h3 {margin:0 0 6px;}\n.jj-guide.jj-guide .jj-guide__steps p {color:var(--jj-muted);}\n.jj-guide.jj-guide .jj-guide__note {margin-top:20px;padding:14px 18px;background:#f8f8fa;border-radius:4px;color:var(--jj-muted);font-size:.875rem;}\n.jj-guide.jj-guide .jj-guide__definitions {margin:20px 0 0;border:1px solid var(--jj-line);border-radius:4px;overflow:hidden;}\n.jj-guide.jj-guide .jj-guide__definitions > div {display:grid;grid-template-columns:210px minmax(0,1fr);}\n.jj-guide.jj-guide .jj-guide__definitions > div + div {border-top:1px solid var(--jj-line);}\n.jj-guide.jj-guide .jj-guide__definitions dt {padding:16px;background:#f8f7fa;font-weight:700;font-size:.9375rem;}\n.jj-guide.jj-guide .jj-guide__definitions dd {padding:16px;color:var(--jj-muted);font-size:.9375rem;}\n.jj-guide.jj-guide .jj-guide__example {margin:24px 0 0;padding:22px;border:1px solid #ded5e9;background:#fff;border-radius:6px;}\n.jj-guide.jj-guide .jj-guide__example figcaption {margin:0 0 18px;color:var(--jj-accent);font-size:.875rem;font-weight:700;}\n.jj-guide.jj-guide .jj-guide__example-body {display:grid;grid-template-columns:1fr 1.5fr;gap:20px;align-items:center;}\n.jj-guide.jj-guide .jj-guide__sample {display:grid;gap:10px;}\n.jj-guide.jj-guide .jj-guide__sample code {display:block;padding:12px 16px;border:1px solid #e8e5ec;border-radius:4px;background:#faf9fc;white-space:pre-wrap;font:500 1.125rem\/1.7 ui-monospace,monospace;}\n.jj-guide.jj-guide .jj-guide__sample > span {font-size:.75rem;line-height:1.7;color:var(--jj-muted);}\n.jj-guide.jj-guide .jj-guide__results {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}\n.jj-guide.jj-guide .jj-guide__results > div {text-align:center;padding:12px 5px;background:#f6f3fa;border-radius:4px;}\n.jj-guide.jj-guide .jj-guide__results dt {font-size:.75rem;letter-spacing:0;}\n.jj-guide.jj-guide .jj-guide__results dd {margin:8px 0 0;font:500 2rem\/1.3 Arial,sans-serif;color:var(--jj-accent);}\n.jj-guide.jj-guide .jj-guide__results small {font-size:.75rem;margin-left:4px;}\n.jj-guide.jj-guide .jj-guide__features {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;}\n.jj-guide.jj-guide .jj-guide__features > section {padding:0;}\n.jj-guide.jj-guide .jj-guide__features h3,.jj-guide.jj-guide .jj-guide__uses h3 {margin-bottom:12px;padding-bottom:10px;border-bottom:2px solid #e6dff0;}\n.jj-guide.jj-guide .jj-guide__features p,.jj-guide.jj-guide .jj-guide__uses p {color:var(--jj-muted);font-size:.9375rem;}\n.jj-guide.jj-guide .jj-guide__fine {font-size:.875rem;color:var(--jj-muted);}\n.jj-guide.jj-guide .jj-guide__keyword {display:block;padding:24px;margin-top:24px;border:1px solid #e2d9ee;border-radius:6px;background:#faf8fd;}\n.jj-guide.jj-guide .jj-guide__keyword h3 {margin:6px 0 12px;font-size:1.125rem;}\n.jj-guide.jj-guide .jj-guide__uses {display:grid;grid-template-columns:1fr;gap:20px;}\n.jj-guide.jj-guide .jj-guide__uses > section {display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;}\n.jj-guide.jj-guide .jj-guide__uses h3 {border:0;padding:0;margin:0;}\n.jj-guide.jj-guide .jj-guide__faq {border-top:1px solid var(--jj-line);}\n.jj-guide.jj-guide .jj-guide__faq details {border-bottom:1px solid var(--jj-line);}\n.jj-guide.jj-guide .jj-guide__faq summary {display:flex;align-items:baseline;gap:14px;list-style:none;padding:18px 2px;cursor:pointer;font-weight:700;font-size:.9375rem;}\n.jj-guide.jj-guide .jj-guide__faq summary::-webkit-details-marker {display:none;}\n.jj-guide.jj-guide .jj-guide__faq summary::before {content:'Q';flex:none;align-self:flex-start;width:28px;line-height:28px;text-align:center;color:#fff;background:var(--jj-accent);border-radius:50%;font:600 .875rem\/28px Arial,sans-serif;}\n.jj-guide.jj-guide .jj-guide__faq summary::after {content:'+';flex:none;margin-left:auto;color:var(--jj-accent);font-size:1.25rem;line-height:1;}\n.jj-guide.jj-guide .jj-guide__faq details[open] summary::after {content:'\u2212';}\n.jj-guide.jj-guide .jj-guide__faq details > div {padding:0 4px 20px 44px;font-size:.9375rem;color:var(--jj-muted);}\n.jj-guide.jj-guide .jj-guide__faq summary:hover {color:var(--jj-accent);}\n.jj-guide.jj-guide .jj-guide__footer {display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:24px;border-top:1px solid var(--jj-line);font-size:.875rem;color:var(--jj-muted);}\n.jj-guide.jj-guide .jj-guide__footer a {display:inline-flex;align-items:center;justify-content:center;gap:24px;padding:10px 24px;min-height:44px;background:var(--jj-accent);color:#fff;border:1px solid var(--jj-accent);border-radius:4px;font-weight:700;text-decoration:none;}\n.jj-guide.jj-guide .jj-guide__footer a:hover {background:#594178;}\n.jj-guide.jj-guide :is(summary,a):focus-visible {outline:3px solid var(--jj-accent);outline-offset:4px;}\n@media(max-width:760px){\n .jj-guide.jj-guide {padding:28px 24px;margin-top:32px;}\n .jj-guide.jj-guide .jj-guide__intro h2 {font-size:1.625rem;}\n .jj-guide.jj-guide .jj-guide__features {grid-template-columns:1fr;}\n .jj-guide.jj-guide .jj-guide__example-body {grid-template-columns:1fr;}\n .jj-guide.jj-guide .jj-guide__uses > section {grid-template-columns:1fr;gap:6px;}\n .jj-guide.jj-guide .jj-guide__definitions > div {grid-template-columns:1fr;}\n .jj-guide.jj-guide .jj-guide__definitions dt {padding:12px 16px 8px;}\n .jj-guide.jj-guide .jj-guide__definitions dd {padding:12px 16px;}\n}\n@media(max-width:480px){\n .jj-guide.jj-guide {padding:24px 18px;font-size:1rem;}\n .jj-guide.jj-guide h2 {font-size:1.125rem;}\n .jj-guide.jj-guide .jj-guide__section-title {gap:8px;padding:12px;}\n .jj-guide.jj-guide .jj-guide__steps li {grid-template-columns:1fr;gap:8px;}\n .jj-guide.jj-guide .jj-guide__step-label {grid-row:auto;justify-self:start;padding:4px 10px;}\n .jj-guide.jj-guide .jj-guide__steps h3 {margin:0;}\n .jj-guide.jj-guide .jj-guide__example,.jj-guide.jj-guide .jj-guide__keyword {padding:16px;}\n .jj-guide.jj-guide .jj-guide__results small {display:block;margin:2px 0 0;}\n .jj-guide.jj-guide .jj-guide__faq summary {gap:10px;}\n .jj-guide.jj-guide .jj-guide__faq details > div {padding-left:0;}\n}\n@media print {.jj-guide.jj-guide {background:#fff!important;box-shadow:none;} .jj-guide.jj-guide .jj-guide__footer a {display:none;}}\n\n<\/style>\n<article style=\"background:#ffffff;border:1px solid #d7d3df;border-radius:8px;\" class=\"jj-guide\" aria-labelledby=\"guide-colorpicker-title\">\n<header class=\"jj-guide__intro\"><p class=\"jj-guide__eyebrow\">How-to guide <span aria-hidden=\"true\">\/<\/span> Color Picker<\/p><h2 id=\"guide-colorpicker-title\">Choose a color and copy the format you need.<\/h2><p class=\"jj-guide__lead\">Select a color from a list, palette or numeric input. Adjust opacity and check several formats including HEX and RGB for websites and documents.<\/p><div class=\"jj-guide__tags\" aria-label=\"Key features\"><span>Choose from a list, palette or numeric values<\/span><span>Adjust opacity<\/span><span>Convert between color formats<\/span><\/div><\/header>\n<section class=\"jj-guide__section\" aria-labelledby=\"guide-colorpicker-1\"><div class=\"jj-guide__section-title\"><span class=\"jj-guide__index\" aria-hidden=\"true\">01<\/span><h2 id=\"guide-colorpicker-1\">How to use<\/h2><\/div><ol class=\"jj-guide__steps\"><li><span class=\"jj-guide__step-label\">STEP 01<\/span><h3>Choose a color<\/h3><p>Choose from the color list or adjust the palette and hue. If you already know a color value, enter it in the matching field.<\/p><\/li><li><span class=\"jj-guide__step-label\">STEP 02<\/span><h3>Check opacity and appearance<\/h3><p>Adjust opacity and compare the displays with and without transparency. Check the examples with white and black text too.<\/p><\/li><li><span class=\"jj-guide__step-label\">STEP 03<\/span><h3>Copy the required format<\/h3><p>Select the copy button for the destination&#8217;s format. Changing a value also updates the other color formats.<\/p><\/li><\/ol><\/section>\n<section class=\"jj-guide__section\" aria-labelledby=\"guide-colorpicker-2\"><div class=\"jj-guide__section-title\"><span class=\"jj-guide__index\" aria-hidden=\"true\">02<\/span><h2 id=\"guide-colorpicker-2\">Choosing a color format<\/h2><\/div><dl class=\"jj-guide__definitions\"><div><dt>HEX \/ HEX8<\/dt><dd>HEX represents color; HEX8 also includes opacity. Check whether the destination supports eight-digit color codes.<\/dd><\/div><div><dt>RGB \/ RGBA<\/dt><dd>Represents red, green and blue values. RGBA also includes opacity.<\/dd><\/div><div><dt>HSL \/ HSLA<\/dt><dd>Represents hue, saturation and lightness. HSLA also supports opacity.<\/dd><\/div><div><dt>HSV \/ HSB<\/dt><dd>Represents hue, saturation and brightness. Use the format expected by your software.<\/dd><\/div><div><dt>CMYK (approximate)<\/dt><dd>An estimate calculated from a screen color. It does not reproduce specific inks, paper or print settings.<\/dd><\/div><\/dl><figure class=\"jj-guide__example\"><figcaption>Use the same color in another format<\/figcaption><p>Check a color in the HEX field, then copy its RGB value for an app that requires RGB input.<\/p><\/figure><\/section>\n<section class=\"jj-guide__section\" aria-labelledby=\"guide-colorpicker-3\"><div class=\"jj-guide__section-title\"><span class=\"jj-guide__index\" aria-hidden=\"true\">03<\/span><h2 id=\"guide-colorpicker-3\">Useful for<\/h2><\/div><div class=\"jj-guide__uses\"><section><h3>Website colors<\/h3><p>Choose colors for backgrounds and buttons.<\/p><\/section><section><h3>Creating documents<\/h3><p>View an existing color code in another format.<\/p><\/section><section><h3>Transparent colors<\/h3><p>Adjust opacity to check how colors look when layered.<\/p><\/section><\/div><\/section>\n<section class=\"jj-guide__section\" aria-labelledby=\"guide-colorpicker-4\"><div class=\"jj-guide__section-title\"><span class=\"jj-guide__index\" aria-hidden=\"true\">04<\/span><h2 id=\"guide-colorpicker-4\">Processing and data<\/h2><\/div><p>Color selection and conversion run in your browser. Use each format&#8217;s copy button to transfer the chosen color to another app.<\/p><\/section>\n<section class=\"jj-guide__section\" aria-labelledby=\"guide-colorpicker-5\"><div class=\"jj-guide__section-title\"><span class=\"jj-guide__index\" aria-hidden=\"true\">05<\/span><h2 id=\"guide-colorpicker-5\">Frequently asked questions<\/h2><\/div><div class=\"jj-guide__faq\"><details><summary>Can I pick a color directly from the screen?<\/summary><div><p>This tool selects, adjusts and converts colors. Use the Screen Color Eyedropper to pick a color from the screen.<\/p><\/div><\/details><details><summary>Will the CMYK values print exactly the same color?<\/summary><div><p>Print color is not guaranteed. Use these as estimates and check the printer&#8217;s requirements and actual print samples.<\/p><\/div><\/details><details><summary>Does changing opacity change HEX?<\/summary><div><p>Use HEX8, RGBA or HSLA to include opacity. Standard HEX and RGB alone do not represent transparency.<\/p><\/div><\/details><details><summary>Why does a color look different on another screen?<\/summary><div><p>Brightness, color settings and background colors affect appearance. Check the color in the environment where it will be used.<\/p><\/div><\/details><\/div><\/section>\n<footer class=\"jj-guide__footer\"><span>Color Picker<\/span><a href=\"#jin-color-picker-1\">Back to tool <span aria-hidden=\"true\">\u2191<\/span><\/a><\/footer><\/article>\n","protected":false},"excerpt":{"rendered":"<p>Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color Picker Choose a color and copy the format you need. Select a color from a list, palette or numeric input. Adjust opacity and check several formats including HEX and RGB for websites and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"swell_btn_cv_data":"","footnotes":""},"class_list":["post-210","page","type-page","status-publish","hentry"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.2.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"msvalidate.01\" content=\"743da3919f7a476585593d5a05a21adf\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/jim-jin.com\/en\/colorpicker\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.2.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"JIM-JIN | Online Tools for Everyday Work - Free tools for CSV, Excel, images and text\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work\" \/>\n\t\t<meta property=\"og:description\" content=\"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/jim-jin.com\/en\/colorpicker\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-09-02T16:35:13+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-08T10:06:09+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker#listItem\",\"name\":\"Color Picker | HEX, RGB, HSL and CMYK\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker#listItem\",\"position\":2,\"name\":\"Color Picker | HEX, RGB, HSL and CMYK\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#listItem\",\"name\":\"Home\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#organization\",\"name\":\"JIM-JIN | Online Tools for Everyday Work\",\"description\":\"Free tools for CSV, Excel, images and text\",\"url\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/jim-jin.com\\\/wp-content\\\/uploads\\\/2026\\\/09\\\/\\u30b9\\u30af\\u30ea\\u30fc\\u30f3\\u30b7\\u30e7\\u30c3\\u30c8-2026-09-06-16.54.44.png\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker\\\/#organizationLogo\"},\"image\":{\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker\\\/#organizationLogo\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker#webpage\",\"url\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker\",\"name\":\"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work\",\"description\":\"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \\\/ Color PickerChoose a color and copy the format you need.Select a c\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/colorpicker#breadcrumblist\"},\"datePublished\":\"2026-09-03T01:35:13+09:00\",\"dateModified\":\"2026-10-08T19:06:09+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/\",\"name\":\"JIM-JIN | Online Tools for Everyday Work\",\"description\":\"Free tools for CSV, Excel, images and text\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/jim-jin.com\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work","description":"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c","canonical_url":"https:\/\/jim-jin.com\/en\/colorpicker","robots":"max-image-preview:large","keywords":"","webmasterTools":{"msvalidate.01":"743da3919f7a476585593d5a05a21adf","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BreadcrumbList","@id":"https:\/\/jim-jin.com\/en\/colorpicker#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/jim-jin.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/jim-jin.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/jim-jin.com\/en\/colorpicker#listItem","name":"Color Picker | HEX, RGB, HSL and CMYK"}},{"@type":"ListItem","@id":"https:\/\/jim-jin.com\/en\/colorpicker#listItem","position":2,"name":"Color Picker | HEX, RGB, HSL and CMYK","previousItem":{"@type":"ListItem","@id":"https:\/\/jim-jin.com\/en\/#listItem","name":"Home"}}]},{"@type":"Organization","@id":"https:\/\/jim-jin.com\/en\/#organization","name":"JIM-JIN | Online Tools for Everyday Work","description":"Free tools for CSV, Excel, images and text","url":"https:\/\/jim-jin.com\/en\/","logo":{"@type":"ImageObject","url":"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/09\/\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8-2026-09-06-16.54.44.png","@id":"https:\/\/jim-jin.com\/en\/colorpicker\/#organizationLogo"},"image":{"@id":"https:\/\/jim-jin.com\/en\/colorpicker\/#organizationLogo"}},{"@type":"WebPage","@id":"https:\/\/jim-jin.com\/en\/colorpicker#webpage","url":"https:\/\/jim-jin.com\/en\/colorpicker","name":"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work","description":"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/jim-jin.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/jim-jin.com\/en\/colorpicker#breadcrumblist"},"datePublished":"2026-09-03T01:35:13+09:00","dateModified":"2026-10-08T19:06:09+09:00"},{"@type":"WebSite","@id":"https:\/\/jim-jin.com\/en\/#website","url":"https:\/\/jim-jin.com\/en\/","name":"JIM-JIN | Online Tools for Everyday Work","description":"Free tools for CSV, Excel, images and text","inLanguage":"en-US","publisher":{"@id":"https:\/\/jim-jin.com\/en\/#organization"}}]},"og:locale":"en_US","og:site_name":"JIM-JIN | Online Tools for Everyday Work - Free tools for CSV, Excel, images and text","og:type":"article","og:title":"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work","og:description":"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c","og:url":"https:\/\/jim-jin.com\/en\/colorpicker","og:image":"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png","og:image:secure_url":"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png","article:published_time":"2026-09-02T16:35:13+00:00","article:modified_time":"2026-10-08T10:06:09+00:00","twitter:card":"summary_large_image","twitter:title":"Color Picker | HEX, RGB, HSL and CMYK - JIM-JIN | Online Tools for Everyday Work","twitter:description":"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c","twitter:image":"https:\/\/jim-jin.com\/wp-content\/uploads\/2026\/07\/Gemini_Generated_Image_7u5jq37u5jq37u5j-1.png"},"aioseo_meta_data":{"post_id":"210","title":null,"description":"Choose a color from the paletteand get its color code for free Pick HEX colors and adjust opacity. How-to guide \/ Color PickerChoose a color and copy the format you need.Select a c","keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_image_url":null,"twitter_title":null,"twitter_description":null,"schema_type":"default","schema_type_options":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"WebPage","isEnabled":true},"graphs":[]},"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"breadcrumb_settings":null,"seo_analyzer_scan_date":null,"created":"2026-09-11 15:09:59","updated":"2026-10-08 16:20:48"},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/jim-jin.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tColor Picker | HEX, RGB, HSL and CMYK\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/jim-jin.com\/en\/"},{"label":"Color Picker | HEX, RGB, HSL and CMYK","link":"https:\/\/jim-jin.com\/en\/colorpicker"}],"_links":{"self":[{"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/pages\/210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/comments?post=210"}],"version-history":[{"count":25,"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions"}],"predecessor-version":[{"id":1068,"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/pages\/210\/revisions\/1068"}],"wp:attachment":[{"href":"https:\/\/jim-jin.com\/en\/wp-json\/wp\/v2\/media?parent=210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}