To create a Field Color class, the value of this field should be a string containing a color code like those used in CSS. This color field should display in block whose color corresponds to the value of the field. In read-write mode. For more see example code given below.

local.FieldColor = instance.web.form.AbstractField.extend({
    events: {
        'change input': function (e) {
            if (!this.get('effective_readonly')) {
                this.internal_set_value($(e.currentTarget).val());
            }
        }
    },
    init: function() {
        this._super.apply(this, arguments);
        this.set("value", "");
    },
    start: function() {
        this.on("change:effective_readonly", this, function() {
            this.display_field();
            this.render_value();
        });
        this.display_field();
        return this._super();
    },
    display_field: function() {
        this.$el.html(QWeb.render("FieldColor", {widget: this}));
    },
    render_value: function() {
        if (this.get("effective_readonly")) {
            this.$(".oe_field_color_content").css("background-color", this.get("value") || "#FFFFFF");
        } else {
            this.$("input").val(this.get("value") || "#FFFFFF");
        }
    },
});
instance.web.form.widgets.add('color', 'instance.oepetstore.FieldColor');
<t t-name="FieldColor">
    <div class="oe_field_color">
        <t t-if="widget.get('effective_readonly')">
            <div class="oe_field_color_content">

        <t t-if="! widget.get('effective_readonly')">
            <input type="color">
        </t>
    </div>
</t>
.oe_field_color_content {
    height: 20px;
    width: 50px;
    border: 1px solid black;
}
</div></t>

Note- You can use that widget in the form view of the message_of_the_day model for its field named color.