LoginSignup
1
1

More than 5 years have passed since last update.

色選びを助けるマン(`・ω・´)

Posted at

【はじめに】私的に役に立つ

:star:起動時画面

:star:「RGB → 16進数カラーコード」に変換機能の流れ
①「Red」「Green」「Blue」の数値を設定をする!
②「RGB → HexcolorCodes」にチェックを入れる!
③「Create」を押下する!
④設定した色が「Hex color codes」に16進数カラーコードを各RGBに表示!
 また、下のテキストボックスにコピーしやすいように表示!
⑤右の四角に色が表示される!

:star:「16進数カラーコード → RGB」に変換機能の流れ
①「Hex color codes」の各RGBに数値を設定をする!
②「HexcolorCodes → RGB」にチェックを入れる!
③「Create」を押下する!
④設定した色が「RGB」に表示!
⑤右の四角に色が表示される!

:star:「カラーパレット」から「RGB」「16進数カラーコード」に変換機能の流れ
①「Color Dialog」を押下する!
②色を選択する!
③設定した色が「RGB」「16進数カラーコード」に表示!
④右の四角に色が表示される!

【各コントロールのプロパティ】足りてるか不安…

:star:「コントロール:Nameプロパティ:その他のプロパティ」の順で
Form:Pallet:Text(Pallet)
GroupBox:RGBGroupBox:Text(RGB)
GroupBox:HexcolorCodesGroupBox:Text(Hex color codes)
Label:redLabel:Text(Red)
Label:greenLabel:Text(Green)
Label:blueLabel:Text(Blue)
Label:hexadecimalLabel:Text(Hex color codes)
Label:sarpLabel:Text(#), Font(11.25pt)
NumericUpDown:redNumericUpDown:Text(0), TextAlign(Right), Maximum(255), ForeColor(Red)
NumericUpDown:greenNumericUpDown:Text(0), TextAlign(Right), Maximum(255), ForeColor(Green)
NumericUpDown:blueNumericUpDown:Text(0), TextAlign(Right), Maximum(255), ForeColor(Blue)
RichTextBox:hexcolorCodesRichTextBox:ReadOnly(True), BackColor(White), ScrollBars(None), BorderStyle(FixedSingle)
CheckBox:RGBCheckBox:Text(RGB → HexcolorCodes)
CheckBox:hexcolorCodesCheckBox:Text(HexcolorCodes → RGB)
Button:createButton:Text(Create)
Button:dialogButton:Text(Color Dialog)
Panel:colorPanel:BorderStyle(FixedSingle)
ColorDialog:colorDialog:なし

【コード】カキカキしまっせ

Form1.cs
using System;
using System.Drawing;
using System.Windows.Forms;

namespace WindowsFormsApp6
{
    public partial class Pallet : Form
    {
        public Pallet()
        {
            InitializeComponent();
        }

        /// <summary>
        /// RGBまたは16進数カラーコードから値を取得し、色をパネルに表示
        /// </summary>
        /// <param name="sender">イベント発行元</param>
        /// <param name="e">イベント情報</param>
        private void createButton_Click(object sender, EventArgs e)
        {
            // 「RGB → HexcolorCodes」にチェック時
            if (RGBCheckBox.Checked == true && hexcolorCodesCheckBox.Checked == false)
            {
                // RGB の値を取得
                int R = (int)redNumericUpDown.Value;
                int G = (int)greenNumericUpDown.Value;
                int B = (int)blueNumericUpDown.Value;

                //設定した色をパネルに表示
                DrawingPanel(R, G, B);

                // 16進数カラーコードで表示
                CreateHexadecimal(R, G, B);
            }
            // 「HexcolorCodes → RGB」にチェック時
            else if (RGBCheckBox.Checked == false && hexcolorCodesCheckBox.Checked == true)
            {
                // 16進数カラーコードを取得し、16進数を10進数に変換
                var R = Int32.Parse(redTextBox.Text, System.Globalization.NumberStyles.HexNumber);
                var G = Int32.Parse(greenTextBox.Text, System.Globalization.NumberStyles.HexNumber);
                var B = Int32.Parse(blueTextBox.Text, System.Globalization.NumberStyles.HexNumber);

                // 設定した色をパネルに表示
                DrawingPanel(R, G, B);

                // RGB で表示
                CreateRGB(R, G, B);
            }
            else
            {
                // チェックボックスの選択に不備があることをメッセージボックスで警告
                MessageBox.Show(@"Please check either ""RGB → HexcolorCodes"" or ""HexcolorCodes → RGB""");
            }
        }

        /// <summary>
        /// カラーダイアログから色を取得し、色をパネルに表示。または、RGB、16進数カラーコードに値を表示
        /// </summary>
        /// <param name="sender">イベント発行元</param>
        /// <param name="e">イベント情報</param>
        private void dialogButton_Click(object sender, EventArgs e)
        {
            // カラーダイアログを表示
            DialogResult dialogResult = colorDialog.ShowDialog();

            // カラーダイアログからRGB の値を取得
            int R = colorDialog.Color.R;
            int G = colorDialog.Color.G;
            int B = colorDialog.Color.B;

            // 設定した色をパネルに表示
            DrawingPanel(R, G, B);

            // 16進数カラーコードで表示
            CreateHexadecimal(R, G, B);

            // RGB で表示
            CreateRGB(R, G, B);
        }

        /// <summary>
        /// 設定したRGB の色をパネルに表示
        /// </summary>
        /// <param name="R">赤色の値</param>
        /// <param name="G">緑色の値</param>
        /// <param name="B">青色の値</param>
        private void DrawingPanel(int R, int G, int B)
        {
            // パネルに設定された色を表示
            colorPanel.BackColor = Color.FromArgb(R, G, B);

            // RGBを16進数に変換し、16進数カラーコードを「hexcolorCodesRichTextBox」に表示
            hexcolorCodesRichTextBox.Text = "#" + $"{R:x2}" + $"{G:x2}" + $"{B:x2}";

            // 「hexcolorCodesRichTextBox」に表示されたの文字を色分け
            hexcolorCodesRichTextBox.Select(1, 0);
            hexcolorCodesRichTextBox.SelectionLength = 2;
            hexcolorCodesRichTextBox.SelectionColor = Color.Red;
            hexcolorCodesRichTextBox.Select(3, 0);
            hexcolorCodesRichTextBox.SelectionLength = 2;
            hexcolorCodesRichTextBox.SelectionColor = Color.Green;
            hexcolorCodesRichTextBox.Select(5, 0);
            hexcolorCodesRichTextBox.SelectionLength = 2;
            hexcolorCodesRichTextBox.SelectionColor = Color.Blue;
        }

        /// <summary>
        /// RGB を表示
        /// </summary>
        /// <param name="R">赤色の値</param>
        /// <param name="G">緑色の値</param>
        /// <param name="B">青色の値</param>
        private void CreateRGB(int R, int G, int B)
        {
            // 設定されたRGBをRGBグループの各RGBに表示
            redNumericUpDown.Value = R;
            greenNumericUpDown.Value = G;
            blueNumericUpDown.Value = B;
        }

        /// <summary>
        /// 16進数カラーコードを表示
        /// </summary>
        /// <param name="R">赤色の値</param>
        /// <param name="G">緑色の値</param>
        /// <param name="B">青色の値</param>
        private void CreateHexadecimal(int R, int G, int B)
        {
            // 設定されたRGBをHex color codesグループの各RGBに表示
            redTextBox.Text = $"{R:x2}";
            greenTextBox.Text = $"{G:x2}";
            blueTextBox.Text = $"{B:x2}";
        }
    }
}

もっと簡略的にできそうだけど、浮かばない (((;^ω^)))

【おわり】チャンチャン♪

最近やっとメソッドを理解したから使ってみた:metal_tone2:
使い方が合ってるかは、わからないが……
いろいろ指摘して欲しい ∑d(≧▽≦*)OK!!

HTMLやCSSを使う時に色の試しをしたくて作ってみたが、地味に助かる(´▽`)♪
これはこれで良いが
「地味に助かる(´▽`*)♪」じゃなく。ちゃんと助けてぇぇぇぇぇぇええええええええええええ

配色に悩むことが多いからそこもフォローできるようにしたい!
色味が決まらないと心に花が咲かないというかーうんうん:sparkles:ワクo(゚ー゚o)(o゚ー゚)oワク:sparkles:
そこらへんも、ブチかましていけたら
続きとしてQiitaに書こうと思うこの頃の俺だぁ:sunglasses:

以上、「色選びを助けるマン(`・ω・´)」でした。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1