<a:form>
    <h:panelGrid columns="2" cellpadding="5" style="margin-left: 20px">
        <h:outputText value="Inline: " />
        <a:colorPicker value="#{colorView.colorInline}" mode="inline" />

        <h:outputText value="Popup: " />
        <a:colorPicker value="#{colorView.colorPopup}" />
    </h:panelGrid>

    <a:separator />

    <a:commandButton value="Submit" oncomplete="PF('dlg').show();" update="grid" style="margin-left: 20px" />

    <a:dialog modal="true" widgetVar="dlg" showEffect="fade" hideEffect="fade" header="Selected Colors" resizable="false">
        <h:panelGrid id="grid" columns="2" cellpadding="5">
            <h:outputText value="Inline color: " />
            <h:outputText value="#{colorView.colorInline}" style="background-color: \##{colorView.colorInline}" />

            <h:outputText value="Popup color: " />
            <h:outputText value="#{colorView.colorPopup}" style="background-color: \##{colorView.colorPopup}" />
        </h:panelGrid>
    </a:dialog>
</a:form>